CODESCRACKER

JavaScript Date and Time (with Examples/Programs)

This post is published to provide the information regarding the work with date and time in JavaScript like:

Everytime we need to implement date and/or time in our JavaScript code, first we need to create an object of the Date() constructor. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p id="res"></p>

   <script>
      const d = new Date();
      document.getElementById("res").innerHTML = d;
   </script>

</body>
</html>
Output

The Date() constructor creates an object (Date object) with the current date and time based on the browser's timezone.

Why do we need to learn date and time in JavaScript?

Sometime we need to implement date and/or time in our application because of the following reasons:

  • to know when the post was published
  • to know when the post was modified
  • to know when the comment was published
  • and many more

So to implement these important features to your applications, you must have at least basic awareness regarding the work with date and time in JavaScript. That is why I have created the brief tutorial on it.

JavaScript Date and Time Functions

Before starting anything regarding the work with date and time, let me first list all the JavaScript built-in methods that can be used to fetch and/or get date and/or time in JavaScript:

  • getFullYear() - get the year (in the form YYYY)
  • getMonth() - get the month (0-11) of a date, where 0 is for January and 11 is for December
  • getDate() - get the day of the month which will be from 1 to 31
  • getDay() - get the day of the week (0-6), where 0 is for Sunday and 6 is for Saturday
  • getHours() - get the hour (0-23)
  • getMinutes() - get the minutes (0-59) of the time
  • getSeconds() - get the seconds (0-59) of the time
  • getMilliseconds() - get the milliseconds (0-999)
  • getTime() - get the total number of milliseconds since January 1, 1970
  • getUTCFullYear() - similar to getFullYear(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCMonth() - similar to getMonth(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCDate() - similar to getDate(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCDay() - similar to getDay(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCHours() - similar to getHours(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCMinutes() - similar to getMinutes(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCSeconds() - similar to getSeconds(), except that it will be based on the Universal Time Coordinated (UTC) date
  • getUTCMilliseconds() - similar to getMilliseconds(), except that it will be based on the Universal Time Coordinated (UTC) date
  • toDateString() - get the date as a string
  • toLocaleDateString() - get the only the date portion of the toLocaleString()
  • toLocaleTimeString() - get the only the time portion of the toLocaleString()
  • toLocaleString() - get the complete date using locale conventions
  • toUTCString() - get the complete date as string based on UTC date
  • getTimezoneOffset() - find the difference between UTC and local time
  • toISOString() - get the date as string based on the ISO (International Organization for Standardization) standard

However, there are more other methods under the category of date and time in JavaScript, but I have not listed those. Because I think, these essential methods (listed above) are much enough to do all the task regarding the work with date and time in your JavaScript application(s).

JavaScript Display Date in Format yyyy-mm-dd

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p>Today's Date: <span id="date"></span></p>

   <script>
      const d = new Date();

      let yyyy = d.getFullYear();
      let mm = d.getMonth() + 1;
      let dd = d.getDate();

      if(mm<10)
         mm = '0' + mm;
      if(dd<10)
         dd = '0' + dd;
      
      let dt = yyyy + "-" + mm + "-" + dd;
      
      document.getElementById("date").innerHTML = dt;
   </script>

</body>
</html>
Output

Today's Date:

Since the getMonth() method returns month's index number of the year, which is from 0 to 11, instead of 1 to 12. Therefore I've added 1 to the returned value by this method.

JavaScript Display Date in Format dd-mm-yyyy

To display the date in the format of dd-mm-yyyy, just replace the following statement from the above (previous) example or program:

let dt = yyyy + "-" + mm + "-" + dd;

with the statement given below:

let dt = dd + "-" + mm + "-" + yyyy;

JavaScript Display Time in Format hh:mm:ss

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p>Current Time: <span id="time"></span></p>

   <script>
      const d = new Date();

      let hh = d.getHours();
      let mm = d.getMinutes();
      let ss = d.getSeconds();

      if(hh<10)
         hh = '0' + hh;
      if(mm<10)
         mm = '0' + mm;
      if(ss<10)
         ss = '0' + ss;
      
      let dt = hh + ":" + mm + ":" + ss;

      document.getElementById("time").innerHTML = dt;
   </script>

</body>
</html>
Output

Current Time:

JavaScript Display Time in Format hh:mm:ss AM/PM

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p>Current Time: <span id="time"></span></p>

   <script>
      const d = new Date();

      let hh = d.getHours();
      let mm = d.getMinutes();
      let ss = d.getSeconds();

      let apm = hh<12 ? 'AM' : 'PM';
      hh = hh%12;

      if(hh<10)
         hh = '0' + hh;
      if(mm<10)
         mm = '0' + mm;
      if(ss<10)
         ss = '0' + ss;
      
      let dt = hh + ":" + mm + ":" + ss + ' ' + apm;

      document.getElementById("time").innerHTML = dt;
   </script>

</body>
</html>
Output

Current Time:

JavaScript Display Date and Time in Format dd-mm-yyyy hh:mm:ss AM/PM

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p>Current Date and Time: <span id="res"></span></p>

   <script>
      const d = new Date();

      let yyyy = d.getFullYear();
      let mn = d.getMonth() + 1;
      let dd = d.getDate();
      let hh = d.getHours();
      let mm = d.getMinutes();
      let ss = d.getSeconds();

      if(mn<10)
         mn = '0' + mn;
      if(dd<10)
         dd = '0' + dd;
      if(hh<10)
         hh = '0' + hh;
      if(mm<10)
         mm = '0' + mm;
      if(ss<10)
         ss = '0' + ss;
      
      let apm = hh<12 ? 'AM' : 'PM';
      hh = hh%12;

      
      let dt = dd + "-" + mn + "-" + yyyy + " " + hh + ":" + mm + ":" + ss + ' ' + apm;

      document.getElementById("res").innerHTML = dt;
   </script>

</body>
</html>
Output

Current Date and Time:

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Like/Share Us on Facebook 😋

CodesCracker provides free educational content. Tutorials, articles, examples, and tests are constantly reviewed to avoid errors, but we do not make any warranties about the completeness, reliability and accuracy of the content. By using our website, you agree to our terms of use, cookie and privacy policy.

© Copyright 2022. All Rights Reserved.

CodesCracker