Almost every developer has to deal with dates when they create a blog, daily routine application, or any other type of dynamic web application. They will need to work with dates.
Examples like submitting data through forms need data entries with accurate dates of creation of that particular data. The JavaScript current date methods can help developers to provide the option of adding a date.
In this article, we will study how to get the current date using JavaScript, and we will use some code snippets according to the following methods.
Methods to get the current date using JavaScript:
- Using the getDate(), getMonth() and getFullYear() methods
- Using the Date().toDateString() method
- Using the toLocaleDateString() method
- Using toJSON() Method
- Using the now() method
Method 1: Using the getDate(), getMonth() and getFullYear() methods of JavaScript:
getDate():
Users can use this method to get the current date of a month from a provided date object. This method returns the day of a month, from 1 to 31 days of a particular month.
But users need to note that the method will be getDate(), not getDay(), as the getDay() method will return the day of the week. If the day is Saturday, it will return a "6" on the output console. But the getDate() method will return the current date of the specified month.
Syntax:
Date.getDate()
getMonth():
Users can use this method to get the current month of a month from a provided date object. This method returns the month of a year, from 0 to 11 months of a particular year.
But the point to note here is that users should start counting the months from 0 as the starting index, which indicates January as 0, February as 1, and so on. Generally, when users retrieve a month number, they need to add 1.
Syntax:
Date.getMonth()
Code Snippet using the three methods:
let current_date = new Date()
let a = current_date.getDate();
let b = current_date.getMonth()+1;
let c = current_date.getFullYear();
let demo = `${a}.${b}.${c}.`;
console.log(demo);
Output:
Explanation:
Here, we used the three methods of JavaScript in one single code example to display or get the current date. But note that we have added one with the getMonth() method because the method will return the corresponding index of the month of a year, from 0 to 11 months.
An alternative approach using these methods:
let current_date = new Date()
let a = current_date.getDate();
let b = current_date.getMonth()+1;
let c = current_date.getFullYear();
let demo = a + "." + b + "." + c + ".";
console.log(demo);
Output:
Explanation:
The above code example will also return the same results as in the first example.
Method 2: Using the Date().toDateString() method to get the current date:
Users can use the toDateString() method to return only the date section of a Date object. Here, the day of the week is the first three letters.
The subsequent three letters represent the current month's name, followed by the next two digits, which specify the day of the current month, and the last four digits set the year.
The toDateString() method returns a string having the date. This method can be much better than slicing for the date portion in the Date() object.
Syntax:
new Date().toDateString();
Code Snippet:
<html>
<head>
<title>How to get the current date using JavaScript?</title>
</head>
<body>
<h1 style = "color: silver">Current date using JavaScript:</h1>
<p> The Current Date is: <span class = "demo"> </span> </p>
<button onclick = "CurrentDate()" > Get current Date </button>
<script type = "text/javascript" >
function CurrentDate() {
let current_date = new Date().toDateString();
document.querySelector('.demo').textContent = current_date;
}
</script>
</body>
</html>
Output:
After clicking the button:
Explanation:
In the above code snippet, we have used HTML, JavaScript, and CSS code to display the current date. Here, we used the JavaScript Date().toDateString() method that displays the current date in the "Day Month Date Year" format.
Also, we have created an onclick button using the <button> tag, which will display the date after users click the button.
Method 3: Using the toLocaleDateString() method to get the current date:
Users can use this method to return the date in a format according to the system's language. Users can even use different options to pass the preferred language as an argument and use simple date formatting options like day, weekday, month, etc.
Syntax:
Date.toLocaleDateString()
There are three types of code examples using the Date.toLocaleDateString() method of JavaScript. These are as follows:
Code Snippet:
let current_date = new Date().toLocaleDateString();
console.log(current_date);
Output:
Explanation:
The output will depend on the locale of the programmer. Here, we used the US locale; thus, the format will be in US date format.
Example 2:
<!doctype html>
<html>
<head>
<title>How to get the current date using JavaScript?</title>
</head>
<body>
<h1 style = "color: silver">Current date using JavaScript:</h1>
<p> The Current Date is: <span class = "demo1"></span></p>
<p> The Current Date is: <span class = "demo2"></span></p>
<p> The Current Date is: <span class = "demo3"></span></p>
<script type = "text/javascript" >
// long, numeric, short
const options = {
weekday: "long", // long, short
year: "numeric", // numeric
month: "long", // long, numeric, short
day: "numeric", // numeric
};
let current_date1 = new Date().toLocaleDateString('en-US', options);
console.log(current_date1);
document.querySelector('.demo1').textContent = current_date1;
let current_date2 = new Date().toLocaleDateString('en-US', {weekday: "short",year: "numeric",month: "short",day: "numeric",
});
document.querySelector('.demo2').textContent = current_date2;
let current_date3 = new Date().toLocaleDateString('en-US', {weekday: "short",year: "numeric",month: "numeric",day: "numeric",
});
document.querySelector('.demo3').textContent = current_date3;
</script>
</body>
</html>
Output:
Explanation:
The en-US signifies a locale code for United States. The date format in French is Day, Month, DD, YYY.
weekday: long, short
year: numeric
month: long, numeric, short
day: numeric
Country List:
"ar-SA",
"bn-BD",
"bn-IN",
"cs-CZ",
"da-DK",
"de-AT",
"de-CH",
"de-DE",
"el-GR",
"en-AU",
"en-CA",
"en-GB",
"en-IE",
"en-IN",
"en-NZ",
"en-US",
"en-ZA",
"es-AR",
"es-CL",
"es-CO",
"es-ES",
"es-MX",
"es-US",
"fi-FI",
"fr-BE",
"fr-CA",
"fr-CH",
"fr-FR",
"he-IL",
"hi-IN",
"hu-HU",
"id-ID",
"it-CH",
"it-IT",
"ja-JP",
"ko-KR",
"nl-BE",
"nl-NL",
"no-NO",
"pl-PL",
"pt-BR",
"pt-PT",
"ro-RO",
"ru-RU",
"sk-SK",
"sv-SE",
"ta-IN",
"ta-LK",
"th-TH",
"tr-TR",
"zh-CN",
"zh-HK",
"zh-TW"
Method 4: Using toJSON() Method to get the current date:
When users use the toJSON() method, it will return a yyyy-mm-dd format according to the time format, hh:mm:ss.ms. The above methods left space for date formatting. Users could have a date in the format: dd/mm/yyyy, dd-mm-yyyy, dd.mm.yyyy, and all the other choices relating to the order of the day, month, and year.
Code Snippet:
let current_date = new Date().toJSON();
console.log(current_date );
Output:
Explanation:
To get only the first ten characters that display the date, we can use the slice() method. It will only return the current date in the output console.
let current_date = new Date().toJSON().slice(0, 10);
console.log(current_date );
Output:
Method 5: Using the now() method in JavaScript:
It is one of the simplest methods of getting the current date using JavaScript. The now() method allows users to display the number of milliseconds passed, which is the origin of the Unix epoch in programming. If users pass the number of milliseconds to the Date constructor, they can obtain an ISO format date.
Syntax:
var A = Date.now();
Code Snippet:
var d = Date(Date.now());
a = d.toString()
console.log("The current date is: " + a)
Output:
Conclusion:
Different methods mentioned in this article can help users to get the current date using JavaScript. A programmer has to choose one method that fits right in their program. If programmers want to make their code simple and efficient, they can use the built-in Date class to create a date or display it in a simple format.