Way to display Current Date and Time in HTML Page uisng JavaScript.
Example using JavaScript Date Object:Syntax:
var date = new Date();
<html>
<body>
<h2>JavaScript Object - new Date()</h2>
<p id="show_date"></p>
</body>
</html>
<script>
var date = new Date();
document.getElementById("show_date").innerHTML = date;
</script>
It will show always Current Date & Time.
How to create JavaScript Date Objects?
There are four ways to create JavaScript Date Objects.Those are following -
- new Date()
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- new Date(milliseconds)
- new Date(date string)
Source Code:
<html>
<body>
<h2>JavaScript date Object - new Date()</h2>
<p>new Date(), Object always return the current date and time:</p> <p id="current_date_time"></p>
</body>
</html>
<script>
var date = new Date(); document.getElementById("current_date_time").innerHTML = date;
</script>
It will show always Current Date & Time.
Source Code:
<html>
<body>
<h2>JavaScript date Object - new Date(7 parameters)</h2>
<p>Using new Date(7 parameters), Object always return the Specified date and time:</p>
<p id="specified_date_time"></p>
</body>
</html>
<script>
var date = new Date(2020, 01, 14, 07, 48, 10, 0);
document.getElementById("specified_date_time").innerHTML = date;
</script>
Result:
Tue Jan 14 2020 07:48:10 GMT+0600 (East Kazakhstan Time)
new Date(milliseconds) - This object always return a new object as Universal Time (UTC) plus the milliseconds.
Source Code:
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Using new Date(milliseconds), return a new object as Universal Time (UTC) plus the milliseconds:</p>
<p id="date_milliseconds"></p>
</body>
</html>
<script>
var date = new Date(0);
document.getElementById("date_milliseconds").innerHTML = date;
</script>
Result:
Thu Jan 01 1970 06:00:00 GMT+0600 (East Kazakhstan Time)
new Date(date string) - Using this object we can create a new object with a specified date and time.
Source Code:
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Using this object we can create a new object with a specified date and time:</p>
<p id="create_object_date_time"></p>
</body>
</html>
<script>
var date = new Date("January 14, 2020 08:04:00");
document.getElementById("create_object_date_time").innerHTML = date; </script>
Result:
In the following video, I will show you how to display the date and time in real time in a web page using JavaScript.
Tue Jan 14 2020 08:04:00 GMT+0600 (East Kazakhstan Time)
Here is the source code of my above video. By using this simple code you can easily display date & time in your HTML web page. It's so simple and easy to understand.
So, you can apply the following code in your HTML web pages and able to be display current date and time in your HTML Page.
<!DOCTYPE html>
<html>
<body>
<h2>Display Date and Time Using Javascript</h2>
<button type="button" onclick="myFunction();">Click Me</button>
<p id="showResult"></p>
</body>
</html>
<script type="text/javascript">
function myFunction(){
document.getElementById("showResult").innerHTML = Date();
}
</script>
Application Demo of the above code:
EmoticonEmoticon