How to Create the Current Date and Time Using JavaScript
Hi, In this article I will show you how to create current Date and Time Using JavaScript. You will also learn to create a digital clock with the current date and current location.
You will also learn how to display a 12 hours time format in JavaScript with AM and PM. We will use the JavaScript setTimeout() method, to call a function or evaluate an expression after a specified number of milliseconds. In this post, we will create a current date and a digital clock with auto-refreshing every 1 second.
Important search Terms:
- How to refresh the clock time every 1 seconds javascript?
- Javascript reloads the page at a specific time
- How to auto-reload the date and time in JavaScript after 1 second?
- JavaScript auto refresh time without reloading the page.
- javascript refresh page if no activity
[Vido Tutorial] How to Create Current Date and Time Using JavaScript]
Now, you can watch the complete step-by-step video tutorial to build a digital clock with current date and time using JavaScript, CSS, and HTML.
Source Codes
Now, it’s time to get the free source codes to create the current time and date with 12 hours format using HTML JavaScript.
HTML Source Code
Following is the HTML source code to display the current date and time on your web page.
<!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>Time and Date</title>
<!-- CSS code -->
<style>
body{
text-align: center;
background-image: url(image.png);
}
.date{
width: 200px;
padding: 15px;
background-color: black;
color: greenyellow;
margin: 0 auto;
font-size: 30px;
font-weight: bolder;
}
h1{
font-size: 50px;
font-weight: 900;
}
</style>
</head>
<body onload="startTime()">
<!-- Auto refreshing Current Date and time -->
<h1>Current Date</h1>
<div class="date" id="currentDate"></div>
<h1>Current Time</h1>
<div class="date" id="currentTime"></div>
<h1>Current Clock Date and Time</h1>
<strong class="date" id="DateTime"></strong>
</body>
</html>
In the above HTML code, I include the onload=”startTime()” attribute in the body element. We will create the startTime function in the JavaScript section. This function will refresh the time and date on every page reload. I have added a small CSS code to style the date and time section.
JavaScript Source Code
After that, find below the JavaScript code to create the current time and date with 12 hours format. You can copy and paste the below code at the bottom of your HTML code inside the body section.
<!-- Javascript code -->
<script>
var today = new Date(); /* new date object */
var date = today.getDate() + ' / ' + (today.getMonth() + 1) + ' / ' + today.getFullYear();
/* display current date */
document.getElementById("currentDate").innerHTML = date;
/* Auto refreshing clock time */
function startTime() {
var today = new Date(); /* new date object */
/* getting minutes hours and seconds from date object */
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
/* 12 hour time formate */
var amPm = "AM";
if ( hours > 13 ) {
amPm = "PM";
hours = hours-12;
}
/* put zero before numbers < 10 */
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ' : ' + minutes + ' : ' + seconds + ' ' + amPm;
/* display current time */
document.getElementById("currentTime").innerHTML = time;
/* Auto refreshing time every 1 second */
setTimeout(function(){startTime()}, 1000 );
/* Time with date and current location */
document.getElementById("DateTime").innerHTML = today;
}
</script>
Let’s try to understand the above JS code. I added +1 to the getMonth() function because the function give the output from 0 to 11. The 0 indicates the first month of the year which is January. By adding +1 we will get the exact number of the current month.
setTimeout(function(){startTime()}, 1000 )
The setTimeout function is a native JavaScript function. It sets a timer (a countdown set in milliseconds) for the execution of a callback function, calling the function upon completion of the timer. This function will set the clock time to auto-refresh after every 1 second.
Final Words
In this post you got a complete understanding to create a digital clock with the current date and time using JavaScript. If you feel any difficulty understanding the above source code feel to comment on my YouTube Channel. If you find it helpful please don’t forget to subscribe to my YouTube Channel to watch more useful tutorials.
