Get the Current Date and Time in JavaScript
There are a lot of scenarios where you might want to get the current date and time in JavaScript. For instance, you might be creating a website where you want to change the theme based on time of the day like setting a dark theme at night or you might simply want to display the current time and date to users.
JavaScript has a Date object which can be used to represent a single moment in time. These Date objects are based on a time value specified as number of milliseconds that have passed since January 1, 1970 UTC. This Date object also has a lot of other useful methods that can be used to get the current day, date, time and month etc. with ease.
In this tutorial, you will learn how to use the Date object and its methods to get all the necessary information about the current date and time.
Get the Current Date [Non Locale Aware]
Creating a new instance of the Date object without passing any parameters stores the current date and time in that instance. If you are planning to show the current date to the user as a string, you can use the toDateString() method to convert the date portion of the calling Date object to a string.
JavaScript
var today = new Date();
var currentDate = today.toDateString();
// Output — Wed Jan 17 2018
console.log(currentDate);You can also use the getDate(), getMonth() and getFullYear() methods to get the current date, current month and current year from the Date object respectively.
The getDate() method returns the day of the month for a specific date based on the local time. Depending on the month, it can be any value from 1 to 31 inclusive.
The getMonth() method returns the month for a specific date based on the local time. This value will be between 0 and 11 inclusive. This means that you have to add 1 to the returned value in order to get the correct month.
The getFullYear() method returns all the four digit of a 4-digit year for a specific date based on the local time.
Once you have all three values, you can combine them together in any order you want and show the result to your users.
JavaScript
var today = new Date();
var theDate = today.getDate();
var theMonth = today.getMonth() + 1;
var theYear = today.getFullYear();
// Output — 17-1-2018
console.log(theDate + "-" + theMonth + "-" + theYear);
// Output — 1-17-2018
console.log(theMonth + "-" + theDate + "-" + theYear);Alternatively, you might need a Date object with the current date but time portion stripped of any information. In such cases, you can use the setHours() method to set the hours, minutes, seconds and milliseconds for the Date instance to zero.
JavaScript
var today = new Date();
today.setHours(0, 0, 0, 0);
// Output — Wed Jan 17 2018 00:00:00 GMT-0800 (Pacific Standard Time)
console.log(today);The above code gives you a Date instance after stripping off all the time related information.
Get the Current Time [Non Locale Aware]
The Date class also has a toTimeString() method which functions like the toDateString() method but returns the current time as a string.
JavaScript
var today = new Date();
var currentTime = today.toTimeString();
// Output — 10:51:06 GMT-0800 (Pacific Standard Time)
console.log(currentTime);You can also use the getHours(), getMinutes() and getSeconds() methods to the current hour, current minute and current second from the Date object respectively.
The getHours() method returns the current hour for a specific Date instance based on the local time. This can have any value between 0 and 23 inclusive.
The getMinutes() method returns the current minute for a specific Date instance based on the local time. This can have any value between 0 and 59 inclusive.
The getSeconds() method returns the current second for a specific Date instance based on the local time. This can also have any value between 0 and 59 inclusive.
After you get access to these three values, you can show them to the user in any order you want.
JavaScript
var today = new Date();
var theHour = today.getHours();
var theMinute = today.getMinutes();
var theSecond = today.getSeconds();
// Output — 11:13:44
console.log(theHour + ":" + theMinute + ":" + theSecond);Get the Current Date [Locale Aware]
Dates are written in different formats in different countries. Some countires writes dates in the format DD/MM/YYYY other write them like MM/DD/YYYY. Moreover, different countries might prefer to use different separators for the date, month and year.
Even if you decide to write dates with the name of month clearly specified, you can’t be sure that the users will definitely understand it. For instance, people who speak German will write “Thursday” as “Donnerstag” and people who speak Hindi will write “Thursday” as “गुरुवार”. The name of all the months will differ as well.
Luckily, JavaScript has a very useful method toLocaleDateString() which will automatically show the current date to users in the locale you specify. If you want to show the date in German, just set the locale to ‘de-DE’. If you want to show the date in French, set the locale to ‘fr-FR’. If you want to show the date in Hindi, set the locale to ‘hi-IN’. Here are some examples:
JavaScript
var today = new Date();
var currentDate = today.toLocaleDateString('en-US');
// Output — 1/18/2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('de-DE');
// Output — 18.1.2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('en-GB');
// Output — 18/01/2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('ja-JP');
// Output — 2018/1/18
console.log(currentDate);So far, we have used toLocaleDateString() to return dates only with DD, MM and YYYY in a locale aware format. The toLocaleDateString() method also accepts an optional options object which gives you more control over the format in which the dates are returned. In the following example, we will use the options object to specify the full name of the month and day of the week in different locales.
JavaScript
var today = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var currentDate = today.toLocaleDateString('en-US', options);
// Output — Thursday, January 18, 2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('de-DE', options);
// Output — Donnerstag, 18. Januar 2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('en-GB', options);
// Output — Thursday, 18 January 2018
console.log(currentDate);
var currentDate = today.toLocaleDateString('ja-JP', options);
// Output — 2018年1月18日木曜日
console.log(currentDate);
var currentDate = today.toLocaleDateString('hi-IN', options);
// Output — गुरुवार, 18 जनवरी 2018
console.log(currentDate);Getting the Current Time [Locale Aware]
Different countries also use different formats for representing the time as well. For example, some countries use 24-hour time with no mention of AM or PM while others use 12-hour time with AM and PM specified.
JavaScript also has another method called toLocaleTimeString() which returns the current time in the right format so you don’t have to worry how time is represented in a certain locale.
JavaScript
var today = new Date();
var currentTime = today.toLocaleTimeString('en-US');
// Output — 10:41:51 PM
console.log(currentTime);
var currentTime = today.toLocaleTimeString('en-GB');
// Output — 22:41:51
console.log(currentTime);
var currentTime = today.toLocaleTimeString('hi-IN');
// Output — 10:41:51 pm
console.log(currentTime);
var currentTime = today.toLocaleTimeString('ja-JP');
// Output — 22:41:51
console.log(currentTime);Get the Current Date and Time in UTC
Sometimes, you might want to show time to your users in UTC time zone. The date and time stored in the Date object that you instantiated will be in the local timezone of the users. In such cases, you can simply use the toUTCString() method to convert the local time in UTC.
Here is an example:
JavaScript
var today = new Date();
// Output — Thu Jan 18 2018 23:52:42 GMT-0800 (Pacific Standard Time)
console.log(today);
var DateTimeUTC = today.toUTCString();
// Output — Fri, 19 Jan 2018 07:46:00 GMT
console.log(DateTimeUTC);You can also get the value of UTC date, month and year separately using the getUTCDate(), getUTCMonth() and getUTCFullYear() parameters.
The getUTCDate() method returns the day of the month for a specific date based on the universal time. Depending on the month, it can be any value from 1 to 31 inclusive.
The getUTCMonth() method returns the month for a specific date based on the universal time. This value will be between 0 and 11 inclusive. This means that you can have to add 1 to the returned value in order to get the correct month.
The getUTCFullYear() method returns all the four digit of a 4-digit year for a specific date based on the universal time.
Similarly, you can use the getUTCHours(), getUTCMinutes() and getUTCSeconds() methods to get the current hour, minute and second based on the universal time.
Quick Summary
Let’s recap everything that we have covered in this tutorial.
- You can use the
toDateString()method to get the current date with the day, month and year as a string. Alternatively, you can also get thegetDate(),getMonth()andgetYear()to get the current date, month and year separately. - You can use the
toTimeString()method to get the current time of the day as a string. Alternatively, you can use thegetHours(),getMinutes()andgetSeconds()method to get the current hour, minute and second of the day separately. - Both
toDateString()andtoTimeString()show the current date and time without being aware of the locale. If you plan to format the date and time shown to users based on their locale, you can use thetoLocaleDateString()andtoLocaleTimeString()methods respectively. - If you ever decide that you want to show the Universal time to all your users irrespective of the timezone that they are in, you can use the
toUTCString()method. JavaScript also allows you to get the UTC day, month and year using thegetUTCDate(),getUTCMonth()andgetUTCYear()methods respectively.
Let me know if there is anything that you would like me to clarify in this tutorial. Also, you are more than welcome to comment if you know other techniques to get the current date and time in JavaScript.
Rate this post —
(No Ratings Yet)
Loading...