September 19, 2021

How to Display Current Date and Time in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to display current date and time in javascript. If you are in web development, then it is pretty much common that here and there you will encounter a situation where you have to display the date and time to your website visitors. A good example can be displaying the date and time when a certain post was published.

The Date constructor is specifically used for this purpose because it contains a lot of built-in methods that make it easy to get the accurate date and time in terms of minutes, hours, seconds, or even milliseconds.

In the following example, we have one button and upon click, we want to display the current date or time on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file and that includes button and h1.
The inner text for the button element is “Show” and upon click of this button, we will display either date or time.
The inner text for the h1 element is “Result” and that will be replaced later by either date or time using javascript. We are using the style attribute here just to center align text content.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <button>Show</button>
  <h1 style="text-align: center;">Result</h1>

  <script src="script.js"></script>
</body>
</html>

Javascript

We have selected button element and h1 element using document.querySelector() and stored them in btnShow and output variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are using the Date constructor to create the Date object and storing it in the today variable.
We are using getMonth(), getFullYear() and getDate() methods to get current month, year, and date respectively. We are adding 1 to the month because by default getMonth() method returns a value between 0 and 11 where 0 stands for January.
We are formatting the date and storing it in the current_date variable. We are displaying that date in the h1 element using the innerText property.
We are using getHours(), getMinutes() and getSeconds() methods to get current hours, minutes, and seconds respectively. Each method returns a value and we are passing that value to addZero() method. The addZero() method simply prepend zero if the passed value is less than 10 and returns it.
We are formatting the time and storing it in the current_time variable. We are displaying that time in the h1 element using the innerText property.

let btnShow = document.querySelector('button');
let output = document.querySelector('h1');

btnShow.addEventListener('click', () => {
    let today = new Date();
    
    let month = today.getMonth() + 1;
    let year = today.getFullYear();
    let date = today.getDate();

    let current_date = `${month}/${date}/${year}`;
    // output.innerText = current_date;

    let hours = addZero(today.getHours());
    let minutes = addZero(today.getMinutes());
    let seconds = addZero(today.getSeconds());

    let current_time = `${hours}:${minutes}:${seconds}`;
    output.innerText = current_time;

});

function addZero(num){
    return num < 10 ? `0${num}`:num;
}

You May Also Like: