Get Current Time in JavaScript

  1. Get Current Time With the Date Object in JavaScript
  2. Get Current Time in UTC Format in JavaScript

There are times when you might want to show the current date or time on your website, for example, when you create a web application like a digital clock where you want to show the current time to the user. It can easily be done with the help of the Date object provided by the JavaScript language.

Get Current Time With the Date Object in JavaScript

The Date object in JavaScript allows us to work with date and time. Using this object, we can either set the time manually and then get it or get the data about the current time. Below are some of the methods which we can use to get the time in JavaScript.

Methods Purpose
getHours() It returns the hours, according to universal time (0-23)
getMinutes() It returns the minutes, according to universal time (0-59)
getSeconds() It returns the seconds, according to universal time (0-59)

Let’s try to understand this with the help of the below code example. The below program will display the current time on the browser. We all know that time consists of three things, hours, minutes, and seconds. To get each of these data, we have different methods available in JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="displayHours"></p>
      <p id="displayMinutes"></p>
      <p id="displaySeconds"></p>


    <script>

      var displayHours = document.getElementById('displayHours');
      var displayMinutes = document.getElementById('displayMinutes');
      var displaySeconds = document.getElementById('displaySeconds');

      var currentTime = new Date();

      displayHours.innerHTML = currentTime.getHours() + " hrs";
      displayMinutes.innerHTML = currentTime.getMinutes() + " min";
      displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
          
    </script>
    
  </body>
</html>

Output:

22 hrs
56 min
19 sec

For displaying these 3 things on the webpage, we will use 3 paragraph tags. Each of these tags has an id associated with it. Using this id we will be able to access these HTML elements inside our JavaScript program using the document.getElementById() method. After that, we will store each of these HTML tags inside the variables with the names displayHours, displayMinutes, and displaySeconds.

To get the current time, we have to call the Date object as a constructor (notice we have a new keyword there). This Date object will return a number that we will store inside the currentTime variable. The currentTime variable now contains the entire time (hours, minutes, and seconds).

We have the current time and the 3 paragraph tags, with the help of which we will be displaying the time on our browser. To get the individual fields i.e hours, minutes and seconds we will use getHours(), getMinutes() and getSeconds() methods respectively on the currentTime variable. Using the innerHTML property, we can assign these individual fields to each of the paragraph tags. If you execute the above code on the browser as an HTML document, you will get the current time as an output on the browser window.

Since this program will display the current local time based on our computer, the above output may vary depending upon the time you are executing the above code.

If you want the entire time with the time format (GMT, UTC, IST, etc) and the date, you can directly assign the currentTime variable to the paragraph tag using the innerHTML property as shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime;
          
    </script>
    
  </body>
</html>

Output:

Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)

Get Current Time in UTC Format in JavaScript

There are different methods with the help of which you can get the time in Universal Time Coordinate (UTC) format. These methods work almost the same way as that of the above methods.

Below is a list of methods that will give you the time in UTC format.

Methods Purpose
getUTCHours() It returns hour value in universal time format (0-23)
getUTCMinutes() It returns minutes value in universal time format (0-59)
getUTCSeconds() It returns seconds value in universal time format(0-59)

Get the Entire Current Time in the Local Format in JavaScript

The methods we have seen only return a particular part of the time, either only hours, minutes, or seconds and not the entire time itself. So, to get the whole current time in the local format, we can use a method named as toLocaleTimeString().

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime.toLocaleTimeString();
          
    </script>
    
  </body>
</html>

Output:

11:43:06 PM
Contribute
DelftStack is a collective effort contributed by software geeks like you. If you like the article and would like to contribute to DelftStack by writing paid articles, you can check the write for us page.

Related Article - JavaScript DateTime

  • Get Current Year in JavaScript