Display Current Date and Time in HTML using JavaScript

Display Current Date and Time In HTML using JavaScript
Project: Digital clock and date
Author: Paarmita Bhargava
Edit Online: View on CodePen
License: MIT

Do you want to display the current date and time in HTML using JavaScript? well, this JavaScript code snippet helps you to create a digital clock widget on the webpage. It uses JavaScript date object to get the current date and time. The clock UI comes with real-time updating clock, AM/PM, and date with days.

If you’re working on a news/magazine website or project where you need to display a time widget, this project might be helpful for you. You can fully customize the clock design & layout according to your website/app template. You can also check this analog clock widget.

How to Display Current Date and Time in HTML using JavaScript

First of all, create a div element with an id “clockdate” and create two div elements (for clock and date) inside it wrapping with a div element “clockdate-wrapper”. Call the startTime() function inside the onload attribute of body tag. The following is the complete HTML structure for the clock:

<body onload="startTime()">
  <div id="clockdate">
  <div class="clockdate-wrapper">
    <div id="clock"></div>
    <div id="date"></div>
  </div>
</div>
</body>

Now, style the clock widget using the following CSS styles. You can set the custom style in order to customize the clock accordion to your requirements.

.clockdate-wrapper {
   background: #005C97;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #363795, #005C97);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
  
}
#clock{
    font-family: sans-serif;
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
#clock span {
    color:#888;
    text-shadow:0px 0px 1px #333;
    font-size:50px;
    position:relative;
    top:-5px;
    left:10px;
}
#date {
    letter-spacing:3px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
}

Finally, add the following JavaScript function to activate the clock.

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
    
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var curWeekDay = days[today.getDay()];
    var curDay = today.getDate();
    var curMonth = months[today.getMonth()];
    var curYear = today.getFullYear();
    var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
    document.getElementById("date").innerHTML = date;
    
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

That’s all! hopefully, you have successfully displayed the current date and time. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply