Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we have presented the HTML and JavaScript code to Display Live Time and Date on HTML Page. Javascript date object and HTML span element can be used to display the current date and time. By default Javascript use the browser's timezone to display time and date.

Live Time is:

Note: The above time keeps changing.

Table of contents:

JavaScript Date Object + HTML, JS code
Update Date And Time in Real Time
Methods to get date and time
Summary

Let us get started with Display Live Time and Date on HTML Page.

JavaScript Date Object + HTML, JS code

New Date() constructor is used to create date object.Current Date and Time is stored inside javascript variable.

Then using TextContent property the content of HTML span element is set with current and time. Unique ID is given to span tag so that we can use it on getElementById() method to dispaly the current date and time.

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Document</title>
<h1> Time is <span id="time"> </span></h1>
<script src="index.js">   </script>
</head>
<body>
</body>
</html>

JavaScript Code

 `use strict`
var datetime = new Date();
console.log(datetime);
document.getElementById("time").textContent = datetime; //it will print on html page

Demo
Date and Time is Thu Sep 30 2021 10:43:14 GMT+0530 (India Standard Time)

Update Date And Time in Real Time

Following is the code to update date and time in real time in a given interval:

`use strict`;
function refreshTime() {
  const timeDisplay = document.getElementById("time");
  const dateString = new Date().toLocaleString();
  const formattedString = dateString.replace(", ", " - ");
  timeDisplay.textContent = formattedString;
}
  setInterval(refreshTime, 1000);

Methods to get date and time

Date.prototype.getDate():

It returns the day of the month between 1 - 31 according to the local time zone

Using getdate()

 `use strict`
var datetime = new Date().getDate();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

Date.prototype.getday():

It returns the day of the week (0–6) for the specific date according to local time zone.

Using getday()

`use strict`
var datetime = new Date().getDay();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

Date.prototype.getFullYear():

It returns the year of the specified date according to the local time zone.

Using getFullYear()

 `use strict`
var datetime = new Date().getFullYear();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

Date.prototype.getHours():
It will return the hour(0-23) in the specific local time zone.

Using getHours()


`use strict`
var datetime = new Date().getHours()+1;
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on webbrowser

Date.prototype.getMilliseconds():
It will return the milliseconds between 0-999 in the specified date according to local time zone

Using getMilliseconds()

 `use strict`
var datetime = new Date().getMilliseconds();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page

Date.prototype.getMonth():
It will return the month between 0- 11 in the specified date according to local time zone. for getting month between 1 - 12 ,You have to add 1.

Using getmonth()


`use strict`
var datetime = new Date().getMonth() + 1;
console.log(datetime); // it will represent date in the console of  developers tool
document.getElementById("time").textContent = datetime; // represent on html page

Date.prototype.toDateString():
It will return the "date" portion of the Date as a human-readable string like Fri Oct 01 2021

Using toDateString()

`use strict`
var datetime = new Date().toDateString();
console.log(datetime); // it will represent date in the console of developer tool
document.getElementById("time").textContent = datetime; // represent on html page

Date.prototype.toLocaleTimeString():
It will return a string with a locality-sensitive representation of the time portion of this date, based on system settings.It will return string like
12:42:15 AM


 `use strict`
var datetime = new Date().toLocaleTimeString();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page

Summary

Date and time created in JavaScript are represented with the Date object.
We can’t create "only date" or "only time".
Months are counted from zero.So Januaruy is zero month to get exact month add one.
Days of week in getDay() are also counted from zero.So Sunday is zero day to exact day add one.
Dates can be subtracted, giving their difference in milliseconds. That’s because a Date becomes the timestamp when converted to a number.
Use Date.now() to get the current timestamp fast.

With this article at OpenGenus, you must have the complete idea of Display Live Time and Date on HTML Page.