How to Inject Current Day and Time into HTML?

Last Updated : 09 Sep, 2024

HTML allows us to embed dynamic content like the current day and time using JavaScript. By injecting real-time information into an HTML document, we can create interactive and user-friendly web pages. This process can be easily achieved using various methods, such as the <time> tag or JavaScript's Date object.

These are the approaches to injecting current day and time into HTML:

Table of Content

Using JavaScript Date Object
Using Tag with JavaScript

Using JavaScript Date Object

In this approach, we are using JavaScript's Date object to get the current day and time. The toLocaleDateString and toLocaleTimeString methods format the date and time, which are then dynamically injected into the HTML using innerHTML. The setInterval function updates the time every second.

Example: The below example uses JavaScript Date Object to inject the current day and time into HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
       Date and time
    </title>
    <style>
        h1 {
            color: green;
        }

        #time {
            font-size: 1.2rem;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h3> Approach 1: Using JavaScript Date Object </h3>
    <div id="time">
    </div>
    <script>
        function updateTime() {
            const date = new Date();
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const time = date.toLocaleTimeString();
            const day = date.toLocaleDateString(undefined, options);
            document.getElementById('time').innerHTML =
                `Today is: ${day}, Current Time: ${time}`;
        }

        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>

Output:

Screenshot-2024-09-06-at-10-15-38-42rc6n3y5---HTML---OneCompiler — Using JavaScript Date Object

Using <time> Tag with JavaScript

In this approach, we are using the <time> tag along with JavaScript to display the current date and time dynamically. The updateTime function fetches the current date and time using the Date object and updates both the dateTime attribute and inner content of the <time> tag every second.

Example: The below example uses <time> Tag with JavaScript to inject current day and time into HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Date and time</title>
    <style>
        h1 {
            color: green;
        }

        time {
            font-size: 1.2rem;
            margin-top: 10px;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h3>Approach 2: Using &lt;time&gt; Tag with JavaScript</h3>
    <time id="current-time"></time>

    <script>
        function updateTime() {
            const now = new Date();
            const timeElement = document.getElementById('current-time');
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            timeElement.dateTime = now.toISOString();
            timeElement.innerHTML = `Today is: ${now.toLocaleDateString(undefined, options)}, 
                                     Time: ${now.toLocaleTimeString()}`;
        }

        setInterval(updateTime, 1000);
        updateTime();
    </script>

</body>

</html>