{"id":65481,"date":"2019-08-05T15:16:20","date_gmt":"2019-08-05T09:46:20","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=65481"},"modified":"2021-02-17T21:32:23","modified_gmt":"2021-02-17T16:02:23","slug":"javascript-date-and-time","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/","title":{"rendered":"JavaScript Date and Time &#8211; Implementation of JavaScript Date Methods"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1459,&quot;href&quot;:&quot;https:\\\/\\\/developer.mozilla.org\\\/bm\\\/docs\\\/Learn\\\/Getting_started_with_the_web\\\/JavaScript_basics&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20201114235129\\\/https:\\\/\\\/developer.mozilla.org\\\/bm\\\/docs\\\/Learn\\\/Getting_started_with_the_web\\\/JavaScript_basics&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:35:23&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2025-12-17 09:27:33&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-01-31 22:51:07&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-02-06 17:37:22&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-13 15:57:57&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-05-14 04:59:30&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-14 04:59:30&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>I was just scrolling down through a website in the morning and suddenly a good morning message popped-up. This put me in a dilemma for a few minutes and I wondered how come a website gets to know that its a morning or a night. I was curious if JavaScript could do that for me, and guess what? It can. JavaScript is fully capable of accessing and manipulating date and time as per my needs. Now, let&#8217;s understand how.<\/p>\n<p>This tutorial explains all you need to know about JavaScript date and time. You can use the current date and time or you can select the time frame you want. The choice is all yours and JavaScript helps you to produce the desired output easily. We will discuss the Date object in this tutorial, along with the numerous methods associated with it.<\/p>\n<p><em><strong>You can&#8217;t move forward in this tutorial until you clear your concepts of\u00a0<a href=\"https:\/\/data-flair.training\/blogs\/javascript-numbers\/\">JavaScript Numbers<\/a><\/strong><\/em><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66210\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg\" alt=\"JavaScript Dates\" width=\"802\" height=\"420\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg 802w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates-520x272.jpg 520w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/a><\/p>\n<h2>JavaScript Date and Time<\/h2>\n<p>One of the features of JavaScript that make it so popular is its ability to use <em>(within the script or in the user\u2019s browser<\/em>) the local date and time. This is the output of the <strong>JavaScript Date object<\/strong>. A Date object contains a <strong>Number<\/strong> that represents <strong>milliseconds<\/strong> since the date <strong>1<\/strong> <strong>January 1970 UTC<\/strong>. The value in the object changes dynamically as the local date and time changes. You can create a <strong>Date<\/strong> object in various ways.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">new Date();\r\nnew Date(value);\r\nnew Date(dateString);\r\nnew Date(year, monthIndex [, dayIndex [, hours [, minutes [, seconds [, milliseconds]]]]]);<\/pre>\n<p>If you declare a variable without the <strong>new<\/strong> keyword, it will return date as a string. The program below implements both these approaches.<\/p>\n<blockquote><p><em><strong>Note:<\/strong> You cannot alter the syntax or the sequence of the Date parameters. JavaScript will either invalidate the format (last statement of the program) or you get a jumbled date.<\/em><\/p><\/blockquote>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">date1 = new Date()\r\n\/\/ Sat Jul 27 2019 10:02:29 GMT+0530 (India Standard Time)\r\ndate1 = Date()\r\n\/\/ \"Sat Jul 27 2019 10:02:36 GMT+0530 (India Standard Time)\"\r\ndate2 = new Date('July 27, 2019 10:40:00')\r\n\/\/ Sat Jul 27 2019 10:40:00 GMT+0530 (India Standard Time)\r\ndate3 = new Date('2019-07-27T10:40:00')\r\n\/\/ Sat Jul 27 2019 10:40:00 GMT+0530 (India Standard Time)\r\ndate4 = new Date(1995, 11, 17, 3, 24, 0)\r\n\/\/ Sun Dec 17 1995 03:24:00 GMT+0530 (India Standard Time)\r\ndate4 = new Date(1995, 11, 17)\r\n\/\/ Sun Dec 17 1995 00:00:00 GMT+0530 (India Standard Time)\r\ndate1 = new Date(\"2019-07-27 T 10:40:00\")\r\n\/\/ Invalid Date<\/pre>\n<p><b>Output:<\/b><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-66947 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1.jpg\" alt=\"JavaScript Date and Time Output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Date-and-Time-1-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong><em>Take a deep dive and explore everything about <a href=\"https:\/\/data-flair.training\/blogs\/javascript-strings\/\">JavaScript Strings<\/a><\/em><\/strong><\/p>\n<h3>Individual Date and Time Component Values<\/h3>\n<p>We saw numerous parameters associated with our Date object above. We understand many of them by name, but JavaScript doesn\u2019t always understand all the date formats that we do. So it\u2019s crucial that you learn to give the script the correct description of the date you want, with the syntax that JavaScript understands. Let\u2019s go through them, so you don\u2019t get confused with the parameter\u2019s values. Don\u2019t forget that missing fields are given the lowest possible value <em>(1 for the day and 0 for the rest of the components)<\/em>.<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"158\" \/>\n<col width=\"204\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Component<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">year<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It represents the year as an integer value. All the values, except 0 to 99 (these map to the year 1900 to 1999), are actual years.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">monthIndex<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It is an integer value representing the month, with 0 for January to 11 for December.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">dayIndex<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It is an integer value representing the day of the month, with 0 for Sunday to 6 for Saturday.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">hours<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It is an integer value representing the hour of the day, with the default as 0 (midnight).<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">minutes<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This integer value represents the minute segment of time, with the default as 0 minutes past the hour.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">seconds<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This integer value represents the second segment of time. The default is 0 seconds past the minute.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">milliseconds<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This integer value depicts the millisecond segment of time. The default is 0 milliseconds past the second.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>JavaScript Date Methods<\/h3>\n<p>The Date object has the following types of methods for accessing and manipulating date and time:<\/p>\n<h4>1. Getter<\/h4>\n<p>These methods retrieve the specified parameter from the Date object. JavaScript doesn\u2019t always return the same format as you want, but you can use these methods to convert them into user-understandable date format. The following table lists all the major methods you need to be aware of to be able to access dates.<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"158\" \/>\n<col width=\"204\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Method<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getDate()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns the day of the month (1-31) for the specified date as per the local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getDay()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns the day of the week (0-6, from Sunday to Saturday) for the specified date according to local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getMonth()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns the month (0-11, from January to December) in the specified date according to local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getFullYear()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns the year (as a 4-digit number) of the specified date according to local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getHours()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns the hour (0-23) for the specific date as per the local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getMinutes()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns the minutes (0-59) for the specified date according to local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getSeconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns the seconds (0-59) for the specified date as per the local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getMilliseconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This returns the milliseconds (0-999) in the specified date as per the local time.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getTime()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns the numeric value of the specified date: the number of milliseconds since January 1, 1970, 00:00:00 UTC (negative for the time before that).<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getTimezoneOffset()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns the time-zone offset in minutes for the current locale.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The\u00a0all above methods work with the local time. If you want to use Coordinated Universal Time (UTC), prefer the methods listed below. These perform the same tasks like the ones we discussed above, but with UTC.<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"107\" \/>\n<col width=\"99\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\">getUTCDate()<\/td>\n<td style=\"text-align: center\">getUTCDay()<\/td>\n<td style=\"text-align: center\">getUTCMonth()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">getUTCFullYear()<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">getUTCHours()<\/td>\n<td style=\"text-align: center\">getUTCMinutes()<\/td>\n<td style=\"text-align: center\">getUTCSeconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">getUTCMilliseconds()<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Let\u2019s use the local time and JavaScript Date methods to print the current date and time in the format on the browser window:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">Current Date: Tuesday, April 25, 2017\r\nCurrent Time: 04: 10 PM<\/pre>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;body&gt;\r\n    &lt;p id = \"date\"&gt;\r\n    &lt;p id = \"time\"&gt;\r\n\r\n    &lt;script&gt;\r\n      var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; \/\/array of days\r\n      var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] \/\/array of months\r\n      var date = new Date(); \/\/creating Date object\r\n      var currentDay = days[date.getDay()]; \/\/determining day using the array and method \r\n      var currentMonth = months[date.getMonth()]; \/\/determining month using the array and method\r\n      var currentDate = date.getDate(); \/\/current date\r\n      var currentYear = date.getFullYear(); \/\/current year\r\n      document.getElementById('date').innerHTML = \"Current Date: \" + currentDay + \", \" + currentMonth + \" \" + currentDate + \", \" + currentYear + \"&lt;\/br\";\r\n\r\n      var hrs = date.getHours(), min = date.getMinutes(); \/\/current time (hours and minutes)\r\n      var suffix = 'AM';\r\n\r\n      if(hrs &gt;= 12){\r\n        hrs -= 12;\r\n        suffix = 'PM';\r\n      }\r\n      if(hrs &lt; 10){\r\n        hrs = \"0\" + hrs;\r\n      }\r\n      if(min &lt; 10){\r\n        min = \"0\" + min;\r\n      }\r\n      document.getElementById('time').innerHTML = \"Current Time: \" + hrs + \": \" + min + \" \" + suffix + \"&lt;\/br\";\r\n    &lt;\/script&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><b>Screenshot:<\/b><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-66919 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date.jpg\" alt=\"Getter Current Date - JavaScript Date and Time\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-66918 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output.jpg\" alt=\"Getter Current Date Output - JavaScript Date and Time\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Getter-Current-Date-Output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Don\u2019t worry, this is not a monster code, it is very easy to implement. Just keep track of all the variables and only use related identifiers. You can use individual methods to retrieve individual elements in the Date object.<\/p>\n<h4>2. Setter<\/h4>\n<p style=\"text-align: left\">These JavaScript methods manipulate the different parameters of the Date object. They set a part of the date and lets us alter the specific values. The methods in the table below produce results as per the local time.<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"100\" \/>\n<col width=\"171\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Method<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setDate()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This Date method sets the day of the month for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setMonth()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It sets the month for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setFullYear()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method sets the full year (as a 4-digit number) for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setHours()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This JavaScript method sets the hours for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setMinutes()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It sets the minutes for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setSeconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It manually sets the seconds for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setMilliseconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method sets the milliseconds for a specified date.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setTime()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It sets the Date object to the time represented by the number of milliseconds since January 1, 1970, 00:00:00 UTC (negative numbers for times before that).<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>JavaScript methods to work with UTC are as follows:<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"107\" \/>\n<col width=\"99\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\">setUTCDate()<\/td>\n<td style=\"text-align: center\">setUTCMonth()<\/td>\n<td style=\"text-align: center\">setUTCFullYear()<\/td>\n<td style=\"text-align: center\">setUTCHours()<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">setUTCMinutes()<\/td>\n<td style=\"text-align: center\">setUTCSeconds()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">setUTCMilliseconds()<\/div>\n<\/div>\n<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em><strong>You can&#8217;t afford to miss the article on\u00a0<a href=\"https:\/\/data-flair.training\/blogs\/javascript-objects\/\">JavaScript Objects<\/a><\/strong><\/em><\/p>\n<h3>3. Conversion Getter<\/h3>\n<p>These methods get the results we want after conversion. This means that they first convert the Date object to a String object and then return the value. The list of these methods is as follows:<\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"100\" \/>\n<col width=\"171\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Method<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">toDateString()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns a string, containing the \u201cdate\u201d of the Date object in a human-readable format.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">toTimeString()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns a string, containing the \u201ctime\u201d of the Date object in a human-readable format.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">toUTCString()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It returns a string, containing the Date using the UTC timezone.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">valueOf()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns the primitive value of the Date object.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">toString()<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">This method returns a string representation of the specified Date object.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can use these methods when you want to use the standard date and time formats that <a href=\"https:\/\/developer.mozilla.org\/bm\/docs\/Learn\/Getting_started_with_the_web\/JavaScript_basics\">JavaScript<\/a> uses. Just remember, you cannot alter the format of the value returned. Also, these methods return String objects rather than Date objects. So you need to be careful when and where you use these methods. Let\u2019s run the following statements in the browser console:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">date.toDateString()\r\n\/\/ \"Sat Jul 27 2019\"\r\ndate.toTimeString()\r\n\/\/ \"12:12:06 GMT+0530 (India Standard Time)\"\r\ndate.toUTCString()\r\n\/\/ \"Sat, 27 Jul 2019 06:42:06 GMT\"\r\ndate.valueOf()\r\n\/\/ 1564209726170\r\ndate.toString()\r\n\/\/ \"Sat Jul 27 2019 12:12:06 GMT+0530 (India Standard Time)\"<\/pre>\n<p><strong>Output:<\/strong><br \/>\n<a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-66948 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output.jpg\" alt=\"conversion getter output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/conversion-getter-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Wow! We got the same result as the above code with a single line. We didn&#8217;t get the same format, but I think this is cool, don\u2019t you? Experiment with these methods, see what happens. Notice the difference between different methods and their outputs. These methods are very beneficial if you know how to use them in your program.<\/p>\n<h2>Summary<\/h2>\n<p>Here we conclude our tutorial on JavaScript Date and Time. Date and time in JavaScript are very fascinating to use. You can do almost anything you want with dates: accessing, manipulating, etc. It also isn\u2019t that difficult. All you need to do is get a hang of all the methods we discussed in this tutorial. Clear all your concepts regarding this topic and you won&#8217;t face any problem with dates in the future.<\/p>\n<p><em><strong>Next, you must go through our next article on <a href=\"https:\/\/data-flair.training\/blogs\/javascript-array\/\">JavaScript Array<\/a><\/strong><\/em><\/p>\n<p>Hope you liked our article.<\/p>\n<p>Share your feedback and queries through the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was just scrolling down through a website in the morning and suddenly a good morning message popped-up. This put me in a dilemma for a few minutes and I wondered how come a&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":66210,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20800,20732,20734],"class_list":["post-65481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-individual-date-and-time-component-values","tag-javascript-date-and-time","tag-javascript-date-methods"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Date and Time - Implementation of JavaScript Date Methods - DataFlair<\/title>\n<meta name=\"description\" content=\"Grab the complete knowledge about JavaScript Date and Time. Also, explore the different JavaScript date methods with their syntax &amp; implementation examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Date and Time - Implementation of JavaScript Date Methods - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Grab the complete knowledge about JavaScript Date and Time. Also, explore the different JavaScript date methods with their syntax &amp; implementation examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T09:46:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-17T16:02:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Date and Time - Implementation of JavaScript Date Methods - DataFlair","description":"Grab the complete knowledge about JavaScript Date and Time. Also, explore the different JavaScript date methods with their syntax & implementation examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Date and Time - Implementation of JavaScript Date Methods - DataFlair","og_description":"Grab the complete knowledge about JavaScript Date and Time. Also, explore the different JavaScript date methods with their syntax & implementation examples.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-05T09:46:20+00:00","article_modified_time":"2021-02-17T16:02:23+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Date and Time &#8211; Implementation of JavaScript Date Methods","datePublished":"2019-08-05T09:46:20+00:00","dateModified":"2021-02-17T16:02:23+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/"},"wordCount":1401,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg","keywords":["Individual Date and Time Component Values","JavaScript Date and Time","JavaScript Date Methods"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/","url":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/","name":"JavaScript Date and Time - Implementation of JavaScript Date Methods - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg","datePublished":"2019-08-05T09:46:20+00:00","dateModified":"2021-02-17T16:02:23+00:00","description":"Grab the complete knowledge about JavaScript Date and Time. Also, explore the different JavaScript date methods with their syntax & implementation examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dates.jpg","width":802,"height":420,"caption":"JavaScript Dates"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-date-and-time\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Date and Time &#8211; Implementation of JavaScript Date Methods"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/65481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=65481"}],"version-history":[{"count":11,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/65481\/revisions"}],"predecessor-version":[{"id":66949,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/65481\/revisions\/66949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/66210"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=65481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=65481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=65481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}