Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
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.
