Jobs Hub

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:

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:

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 »