The Tardis from Doctor Who TV series by ThomasB72

Simple Javascript Clock With Date

  • Adam Douglas

I recently had a situation come up where I was required to create a live JavaScript based clock with date. This topic has been discussed endlessly online over the years so I will not explain it line by line, however I do feel it could be useful to see an example with it all brought together. The code below illustrates how the clock and date is created using jQuery or pure JavaScript. It’s broken down to allow for ease of alteration of the output format. For example you may change the third parameter of SetTime() to “12” or “24” without double quotes to choose the hour format. The clock and date values represent the locale of the user’s web browser, however the formatting may not match the locale.

If one is dealing with a more complex situation I would suggest looking at using Moment.js or Luxon libraries.

Note

If jQuery is not being used remove line 6 in the "index.html".

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/clock.js"></script>
    <title>Simple JavaScript Clock with Date</title>
</head>
<body>
    <main role="main" class="container">
        <section>
            <div class="datetime">
                <div id="date"></div>
                <div id="time"></div>
            </div>
        </section>
    </main>
</body>
</html>

clock.js (jQuery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

function updateDatetime() {
    var datetime = new Date();
    setDate(datetime);
    setTime(datetime, 2, 24);
}
function setDate(datetime) {
    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
    $('#date').html(dayNames[datetime.getDay()] + ' ' + monthNames[datetime.getMonth()] + ' ' + datetime.getDate() + ', ' + datetime.getFullYear());
}
function setTime(datetime, digits, hourFormat) {
    var hours = datetime.getHours();
    var minutes = datetime.getMinutes();
    var seconds = datetime.getSeconds();
    var timezone = datetime.toLocaleTimeString([], {
        timeZoneName: 'short'
    });
    if(hourFormat === 24) {
        if(digits === 2) {
            hours = (hours < 10 ? '0' : "") + hours;
            minutes = (minutes < 10 ? '0' : "") + minutes;
            seconds = (seconds < 10 ? '0' : "") + seconds;
        }
        $("#time").html(hours + ':' + minutes + ':' + seconds + ' ' + timezone);
    }
    else {
        var ampm = hours >= 12 ? 'pm' : 'am';
        hours = hours % 12;
        hours = hours ? hours : 12;

        if(digits === 2) {
            hours = (hours < 10 ? '0' : "") + hours;
            minutes = (minutes < 10 ? '0' : "") + minutes;
            seconds = (seconds < 10 ? '0' : "") + seconds;
        }

        $("#time").html(hours + ':' + minutes + ':' + seconds + ' ' + ampm + ' ' + timezone);
    }
}
setInterval(function () {
    updateDatetime();
}, 1000);

clock.js (pure JavaScript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function updateDatetime() {
    var datetime = new Date();
    setDate(datetime);
    setTime(datetime, 2, 24);
}
function setDate(datetime) {
    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
    document.querySelector('#date').innerHTML = dayNames[datetime.getDay()] + ' ' + monthNames[datetime.getMonth()] + ' ' + datetime.getDate() + ', ' + datetime.getFullYear();
}
function setTime(datetime, digits, hourFormat) {
    var hours = datetime.getHours();
    var minutes = datetime.getMinutes();
    var seconds = datetime.getSeconds();
    var timezone = datetime.toLocaleTimeString([], {
        timeZoneName: 'short'
    });

    if(hourFormat === 24) {
        if(digits === 2) {
            hours = (hours < 10 ? '0' : "") + hours;
            minutes = (minutes < 10 ? '0' : "") + minutes;
            seconds = (seconds < 10 ? '0' : "") + seconds;
        }
        document.querySelector('#time').innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + timezone;
    }
    else {
        var ampm = hours >= 12 ? 'pm' : 'am';
        hours = hours % 12;
        hours = hours ? hours : 12;

        if(digits === 2) {
            hours = (hours < 10 ? '0' : "") + hours;
            minutes = (minutes < 10 ? '0' : "") + minutes;
            seconds = (seconds < 10 ? '0' : "") + seconds;
        }
        document.querySelector('#time').innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + ampm  + ' ' + timezone;
    }
}

window.setInterval(updateDatetime, 1000);

Example Output

1
2

Thur Mar 25, 2021
15:20:19 3:20:19 PM CST

I’m publishing this as part of 100 Days To Offload. You can join in yourself by visiting 100DaysToOffload.com.

    • Apply admonition style for note
    • change topic
    • remove tags javascript, jquery

Comments

Reply via email