{"id":137,"date":"2019-09-16T16:46:33","date_gmt":"2019-09-16T16:46:33","guid":{"rendered":"https:\/\/tutorialio.com\/?p=137"},"modified":"2025-11-04T10:31:25","modified_gmt":"2025-11-04T10:31:25","slug":"get-the-current-date-and-time-in-javascript","status":"publish","type":"post","link":"https:\/\/hellonitish.com\/blog\/get-the-current-date-and-time-in-javascript\/","title":{"rendered":"Get the Current Date and Time in JavaScript"},"content":{"rendered":"

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.<\/p>\n

JavaScript has a Date object<\/a> which can be used to represent a single moment in time. These Date<\/code> objects are based on a time value specified as number of milliseconds that have passed since January 1, 1970 UTC. This Date<\/code> 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.<\/p>\n

In this tutorial, you will learn how to use the Date<\/code> object and its methods to get all the necessary information about the current date and time.<\/p>\n

Get the Current Date [Non Locale Aware]<\/h2>\n

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()<\/code> method to convert the date portion of the calling Date<\/code> object to a string.<\/p>\n

JavaScript<\/p>\n

var today = new Date();\nvar currentDate = today.toDateString();\n\n\/\/ Output \u2014 Wed Jan 17 2018\nconsole.log(currentDate);<\/code><\/pre>\n
You can also use the getDate()<\/code>, getMonth()<\/code> and getFullYear()<\/code> methods to get the current date, current month and current year from the Date<\/code> object respectively.<\/p>\n
The getDate()<\/code> 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.<\/p>\n
The getMonth()<\/code> 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.<\/p>\n
The getFullYear()<\/code> method returns all the four digit of a 4-digit year for a specific date based on the local time.<\/p>\n
Once you have all three values, you can combine them together in any order you want and show the result to your users.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\nvar theDate = today.getDate();\nvar theMonth = today.getMonth() + 1;\nvar theYear = today.getFullYear();\n\n\/\/ Output \u2014 17-1-2018\nconsole.log(theDate + \"-\" + theMonth + \"-\" + theYear);\n\n\/\/ Output \u2014 1-17-2018\nconsole.log(theMonth + \"-\" + theDate + \"-\" + theYear);<\/code><\/pre>\n
Alternatively, you might need a Date<\/code> object with the current date but time portion stripped of any information. In such cases, you can use the setHours()<\/code> method to set the hours, minutes, seconds and milliseconds for the Date<\/code> instance to zero.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\ntoday.setHours(0, 0, 0, 0);\n\n\/\/ Output \u2014 Wed Jan 17 2018 00:00:00 GMT-0800 (Pacific Standard Time)\nconsole.log(today);<\/code><\/pre>\n
The above code gives you a Date<\/code> instance after stripping off all the time related information.<\/p>\n
Get the Current Time [Non Locale Aware]<\/h2>\n
The Date<\/code> class also has a toTimeString()<\/code> method which functions like the toDateString()<\/code> method but returns the current time as a string.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\nvar currentTime = today.toTimeString();\n\n\/\/ Output \u2014 10:51:06 GMT-0800 (Pacific Standard Time)\nconsole.log(currentTime);<\/code><\/pre>\n
You can also use the getHours()<\/code>, getMinutes()<\/code> and getSeconds()<\/code> methods to the current hour, current minute and current second from the Date<\/code> object respectively.<\/p>\n
The getHours()<\/code> 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.<\/p>\n
The getMinutes()<\/code> 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.<\/p>\n
The getSeconds()<\/code> 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.<\/p>\n
After you get access to these three values, you can show them to the user in any order you want.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\nvar theHour = today.getHours();\nvar theMinute = today.getMinutes();\nvar theSecond = today.getSeconds();\n\n\/\/ Output \u2014 11:13:44\nconsole.log(theHour + \":\" + theMinute + \":\" + theSecond);<\/code><\/pre>\n
Get the Current Date [Locale Aware]<\/h2>\n
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.<\/p>\n
Even if you decide to write dates with the name of month clearly specified, you can\u2019t be sure that the users will definitely understand it. For instance, people who speak German will write \u201cThursday\u201d as \u201cDonnerstag\u201d and people who speak Hindi will write \u201cThursday\u201d as \u201c\u0917\u0941\u0930\u0941\u0935\u093e\u0930\u201d. The name of all the months will differ as well.<\/p>\n
Luckily, JavaScript has a very useful method toLocaleDateString()<\/a> 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 \u2018de-DE\u2019. If you want to show the date in French, set the locale to \u2018fr-FR\u2019. If you want to show the date in Hindi, set the locale to \u2018hi-IN\u2019. Here are some examples:<\/p>\n
JavaScript<\/p>\n
var today = new Date();\n\nvar currentDate = today.toLocaleDateString('en-US');\n\/\/ Output \u2014 1\/18\/2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('de-DE');\n\/\/ Output \u2014 18.1.2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('en-GB');\n\/\/ Output \u2014 18\/01\/2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('ja-JP');\n\/\/ Output \u2014 2018\/1\/18\nconsole.log(currentDate);<\/code><\/pre>\n
So far, we have used toLocaleDateString()<\/code> to return dates only with DD, MM and YYYY in a locale aware format. The toLocaleDateString()<\/code> method also accepts an optional options<\/code> object which gives you more control over the format in which the dates are returned. In the following example, we will use the options<\/code> object to specify the full name of the month and day of the week in different locales.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\nvar options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n\nvar currentDate = today.toLocaleDateString('en-US', options);\n\/\/ Output \u2014 Thursday, January 18, 2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('de-DE', options);\n\/\/ Output \u2014 Donnerstag, 18. Januar 2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('en-GB', options);\n\/\/ Output \u2014 Thursday, 18 January 2018\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('ja-JP', options);\n\/\/ Output \u2014 2018\u5e741\u670818\u65e5\u6728\u66dc\u65e5\nconsole.log(currentDate);\n\nvar currentDate = today.toLocaleDateString('hi-IN', options);\n\/\/ Output \u2014 \u0917\u0941\u0930\u0941\u0935\u093e\u0930, 18 \u091c\u0928\u0935\u0930\u0940 2018\nconsole.log(currentDate);<\/code><\/pre>\n
Getting the Current Time [Locale Aware]<\/h2>\n
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.<\/p>\n
JavaScript also has another method called toLocaleTimeString()<\/a> which returns the current time in the right format so you don\u2019t have to worry how time is represented in a certain locale.<\/p>\n
JavaScript<\/p>\n
var today = new Date();\n\nvar currentTime = today.toLocaleTimeString('en-US');\n\/\/ Output \u2014 10:41:51 PM\nconsole.log(currentTime);\n\nvar currentTime = today.toLocaleTimeString('en-GB');\n\/\/ Output \u2014 22:41:51\nconsole.log(currentTime);\n\nvar currentTime = today.toLocaleTimeString('hi-IN');\n\/\/ Output \u2014 10:41:51 pm\nconsole.log(currentTime);\n\nvar currentTime = today.toLocaleTimeString('ja-JP');\n\/\/ Output \u2014 22:41:51\nconsole.log(currentTime);<\/code><\/pre>\n
Get the Current Date and Time in UTC<\/h2>\n
Sometimes, you might want to show time to your users in UTC time zone. The date and time stored in the Date<\/code> object that you instantiated will be in the local timezone of the users. In such cases, you can simply use the toUTCString()<\/a> method to convert the local time in UTC.<\/p>\n
Here is an example:<\/p>\n
JavaScript<\/p>\n
var today = new Date();\n\n\/\/ Output \u2014 Thu Jan 18 2018 23:52:42 GMT-0800 (Pacific Standard Time)\nconsole.log(today);\n\nvar DateTimeUTC = today.toUTCString();\n\/\/ Output \u2014 Fri, 19 Jan 2018 07:46:00 GMT\nconsole.log(DateTimeUTC);<\/code><\/pre>\n
You can also get the value of UTC date, month and year separately using the getUTCDate()<\/code>, getUTCMonth()<\/code> and getUTCFullYear()<\/code> parameters.<\/p>\n
The getUTCDate()<\/code> 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.<\/p>\n
The getUTCMonth()<\/code> 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.<\/p>\n
The getUTCFullYear()<\/code> method returns all the four digit of a 4-digit year for a specific date based on the universal time.<\/p>\n
Similarly, you can use the getUTCHours()<\/code>, getUTCMinutes()<\/code> and getUTCSeconds()<\/code> methods to get the current hour, minute and second based on the universal time.<\/p>\n
Quick Summary<\/h2>\n
Let\u2019s recap everything that we have covered in this tutorial.<\/p>\n
    \n
  1. You can use the toDateString()<\/code> method to get the current date with the day, month and year as a string. Alternatively, you can also get the getDate()<\/code>, getMonth()<\/code> and getYear()<\/code> to get the current date, month and year separately.<\/li>\n
  2. You can use the toTimeString()<\/code> method to get the current time of the day as a string. Alternatively, you can use the getHours()<\/code>, getMinutes()<\/code> and getSeconds()<\/code> method to get the current hour, minute and second of the day separately.<\/li>\n
  3. Both toDateString()<\/code> and toTimeString()<\/code> 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 the toLocaleDateString()<\/code> and toLocaleTimeString()<\/code> methods respectively.<\/li>\n
  4. 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()<\/code> method. JavaScript also allows you to get the UTC day, month and year using the getUTCDate()<\/code>, getUTCMonth()<\/code> and getUTCYear()<\/code> methods respectively.<\/li>\n<\/ol>\n
    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.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[9,19],"class_list":["post-137","post","type-post","status-publish","format-standard","hentry","category-how-to-guides","tag-date-time","tag-javascript"],"_links":{"self":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":1,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":10236,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions\/10236"}],"wp:attachment":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}