javaScript display current date and time; In this tutorial, i am going to show you how to display current system date and time in HTML using JavaScript.
Will take an example to display current Date and Time in H2 html tag with using javascript document.getElementById(“ID”).innerHTML. As well as display current day name.
JavaScript Code to Display Current System Date and Time
JavaScript Code
function updateTime() { var dateInfo = new Date(); /* time */ var hr, _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(), sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(), ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM"; // replace 0 with 12 at midnight, subtract 12 from hour if 13–23 if (dateInfo.getHours() == 0) { hr = 12; } else if (dateInfo.getHours() > 12) { hr = dateInfo.getHours() - 12; } else { hr = dateInfo.getHours(); } var currentTime = hr + ":" + _min + ":" + sec; // print time document.getElementsByClassName("hms")[0].innerHTML = currentTime; document.getElementsByClassName("ampm")[0].innerHTML = ampm; /* date */ var dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], day = dateInfo.getDate(); // store date var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day; document.getElementsByClassName("date")[0].innerHTML = currentDate; }; // print time and date once, then update them every second updateTime(); setInterval(function() { updateTime() }, 1000);
HTML Source Code with JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>javaScript Digital Clock with date</title> </head> <style> body { font-family: "Work Sans", sans-serif; background: rgb(230, 230, 230); } .time { margin:100px auto; background: rgb(12, 12, 12); color: #fff; border: 7px solid rgb(255, 252, 252); box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding: 8px; text-align: center; width: 500px; } .hms { font-size: 68pt; font-weight: 200; } .ampm { font-size: 22pt; } .date { font-size: 15pt; } </style> <body> <div class="time"> <span class="hms"></span> <span class="ampm"></span> <br> <span class="date"></span> </div> </body> <script> function updateTime() { var dateInfo = new Date(); /* time */ var hr, _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(), sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(), ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM"; // replace 0 with 12 at midnight, subtract 12 from hour if 13–23 if (dateInfo.getHours() == 0) { hr = 12; } else if (dateInfo.getHours() > 12) { hr = dateInfo.getHours() - 12; } else { hr = dateInfo.getHours(); } var currentTime = hr + ":" + _min + ":" + sec; // print time document.getElementsByClassName("hms")[0].innerHTML = currentTime; document.getElementsByClassName("ampm")[0].innerHTML = ampm; /* date */ var dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], day = dateInfo.getDate(); // store date var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day; document.getElementsByClassName("date")[0].innerHTML = currentDate; }; // print time and date once, then update them every second updateTime(); setInterval(function() { updateTime() }, 1000); </script> </html>
The Output of the above code; as follows:
You can learn more about the JavaScript date and time methods:
Get Current Date & Time in JavaScript
Use Date() method to create an object in JavaScript with current date and time. This provides output in UTC timezone.
var today = new Date();
1. Current Date in JavaScript
Use the following script to get the current date using JavaScript in “Y-m-d” format.
var today = new Date(); var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
- getFullYear() – Provides current year like 2020.
- getMonth() – Provides current month values 0-11. Where 0 for Jan and 11 for Dec. So added +1 to get result.
- getDate() – Provides day of the month values 1-31.
2. Current Time in JavaScript
Use the following script to get the current time using JavaScript in “H:i:s” format.
var today = new Date(); var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
- getHours() – Provides current hour between 0-23.
- getMinutes() – Provides current minutes between 0-59.
- getSeconds() – Provides current seconds between 0-59.
3. Current Date & Time Both in JavaScript
Use the following script to get the current date and time using JavaScript in “Y-m-d H:i:s” format. You can simply combine the output of the above JavaScript code in one variable as below:
var today = new Date(); var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); var dateTime = date+' '+time;