CODESCRACKER

JavaScript Date and Time (with Example Programs)

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

Every time we need to implement date and/or time in our JavaScript code, we first need to create an object in 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 (a 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?

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

So to implement these important features in your applications, you must have at least basic awareness regarding the work with date and time in JavaScript. That is why I have created a 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. I think these essential methods (listed above) are enough to do all the tasks 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 the 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 displays date and time in the 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 »

Liked this post? Share it!