Displaying Real-Time Day, Date, and Time in a Custom Format using JavaScript

Introduction

In various web applications and dashboards, it can be incredibly useful to display real-time information such as the current day, date, and time in a customized format. For example, you might want to show it in a format like "Saturday, September 22, 2024 13:18:10 PM." Achieving this can be done easily with JavaScript, and in this article, we'll explore how to do just that.

The HTML Structure

First, let's set up the HTML structure for displaying our real-time day, date, and time:

<div id="real-time-clock"></div>

We've created a <div> element with the id "real-time-clock." This is where our real-time information will be displayed.

The JavaScript Magic

Now, let's delve into the JavaScript code that will make this happen:

<script>
function updateDateTime() {
    const clockElement = document.getElementById('real-time-clock');
    const currentTime = new Date();

    // Define arrays for days of the week and months to format the day and month names.
    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const dayOfWeek = daysOfWeek[currentTime.getDay()];

    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const month = months[currentTime.getMonth()];

    const day = currentTime.getDate();
    const year = currentTime.getFullYear();

    // Calculate and format hours (in 12-hour format), minutes, seconds, and AM/PM.
    let hours = currentTime.getHours();
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12 || 12;
    const minutes = currentTime.getMinutes().toString().padStart(2, '0');
    const seconds = currentTime.getSeconds().toString().padStart(2, '0');

    // Construct the date and time string in the desired format.
    const dateTimeString = `${dayOfWeek}, ${month} ${day}, ${year} ${hours}:${minutes}:${seconds} ${ampm}`;
    clockElement.textContent = dateTimeString;
}

// Update the date and time every second (1000 milliseconds).
setInterval(updateDateTime, 1000);

// Initial update.
updateDateTime();
</script>

Here's what this JavaScript code does:

1. updateDateTime function retrieves the current date and time, then formats it according to our requirements.
2. It constructs the complete date and time string.
3. The setInterval function is used to call updateDateTime every second, ensuring that the displayed time is continuously updated to reflect the current time.
4. The updateDateTime function is called initially to display the time immediately when the page loads.

Conclusion

By following these steps and integrating this JavaScript code into your web application or dashboard, you can display the real-time day, date, and time in a custom format such as "Saturday, September 22, 2024 13:18:10 PM." This feature adds a dynamic and informative element to your application, enhancing the user experience.