CoderGuides

How to Display the Current Time and Date and Have it Update Dynamically

Objective: To get and display the current time and date in the browser of your HTML page, and have the time update dynamically every second.

This guide will explain how to get the current time and date, and display it in the browser of your HTML page. The first part will go over how to get the current time and date using Moment.js. The second part will explain how to display the current time and date in the browser, and have it update dynamically every second in real time, like this:

Thursday, April 24th 2025, 9:43:24 pm

Getting the Current Time and Date

1. The first thing we need to do is to get the CDN, so that we will be able to use Moment.js in our file. If we look at the docs for Moment.js, we see a number of ways to bring Moment.js into our application. We're going to be using the CDN. In the docs, scroll down to the Browser section. You'll see that Moment.js is available on CDNJS and on jsDelivr. This is where we can find the CDN.

Moment.js Doc

You can choose either. Let's click on jsDelivr. This will bring us to jsDelivr, where we can find the CDN for Moment.js. Scroll down to the first one and click on where it says "Copy to Clipboard".

jsDelivr

You can either copy the URL or the HTML. Let's go ahead and copy the HTML. We're going to be pasting this CDN into our HTML code.

jsDelivr

2. Let's go to our text editor now, to our HTML page. And we just have a very simple HTML page. And to keep it simple, we just have the <head> section with a <title>. And in the <body> we just have an <h1> with the text, "Current Time".

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Current Time HTML Page</title>
</head>

<body>
  <h1>Current Time</h1>
</body>

</html>

And this is what it looks like in the browser:

Current Time HTML Page

So, now let's bring in the CDN that we copied from jsDelivr up above and paste it into our code in the <head> section of our code (line 7).

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Current Time HTML Page</title>
  <!-- Link to Moment.js -->
  <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
</head>

<body>
  <h1>Current Time</h1>
</body>

</html>

3. Next, we're going to create a separate JavaScript file for the JavaScript code that we'll be adding. And this is going to go in a separate folder. So, let's create a folder called assets. And inside this folder, let's create another folder and call it javascript. And inside the javascript folder, let's create a file and call it app.js. This is where we'll be putting our JavaScript code.

Next, we need to connect our HTML file to our app.js file. So, we need to add the following line to our HTML file. And we'll add it down at the bottom before the closing <body> tag (line 5). So, we have an assets folder, and inside that is the javascript folder, and inside that is our app.js file, and so we get: src="assets/javascript/app.js".

<body>
  <h1>Current Time</h1>

  <!-- Link to JavaScript file -->
  <script src="assets/javascript/app.js" type="text/javascript"></script>
</body>

</html>

And just to make sure our connection is working properly, let's got to our app.js file and add a quick alert to test and see if we correctly linked our two files. So, let's go ahead and add a quick alert, and then save it:

alert('Hello from app.js');

And if we refresh the browser, we see our alert message, which means that we have our HTML and app.js correctly hooked up. So, we're good to go.

Alert Message

Alternatively, rather than creating a separate file for your JavaScript, you can put your JavaScript code in your HTML code using the <script> tags down at the bottom before the closing <body> tag (lines 4-6), and it will work the same. As we go forward, we will continue to use a separate app.js file.

<body>
    <h1>Current Time</h1>

  <script>
    alert("Hello from app.js");
  </script>
</body>

</html>

4. We are now ready to use Moment.js. If we go to Moment.js, and scroll down a bit, we'll see a number of different formats that we can use for time and date.

Moment.js

Let's take the most basic example below: file: moment().format();

Moment.js

And let's grab this line of code and put it in our app.js file.

moment().format();

And we can't really do anything with this yet, because we won't be able to see the time and date with just this. So for now, let's console.log this to make sure it's working.

console.log(moment().format());

And now if we refresh the browser and check the Console in the DevTools (using the keyboard shortcut Control + Shift + J on Windows, then clicking in the Console tab), we get the current time and date, so we know it's working.

Current Time and Date in the Console

Let's go back to the docs and choose a different format, for example, the first one.

Moment.js

And let's console.log this in app.js. And let's add some text too.

console.log(
  'The current time and date is ' + moment().format('MMMM Do YYYY, h:mm:ss a')
);

And if we refresh the browser and check the Console, we get our new format with the text we added.

Current Time and Date in the Console

And that’s all there is to it. So, now we know how to get the current time and date using Moment.js. But right now, we can only access it in the Console. The next step is to display it in the browser.

Displaying the Time and Date in the Browser

1. We're going to be using some jQuery, so the first thing we need to do is to grab the CDN so that we'll be able to use it in our code. So, let's grab the CDN here. And we're going to use the minified version, so let's copy the second one.

CDNJS

And we're going to put this in our HTML in <script> tags, down below before the closing <body> tag (lines 5-7).

<body>
  <h1>Current Time</h1>

  <!-- jQuery Link -->
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <!-- Link to JavaScript file -->
  <script src="assets/javascript/app.js" type="text/javascript"></script>

</body>

</html>

2. Next, in our app.js file, we're going to create a function so that we'll be able to grab the current time and date from Moment.js, and display it in the browser. We're going to call it update (line 1), and we'll be using it in the next step to have the time update dynamically every second. We'll use the variable, date (line 2), to get the current time and date from Moment.js; and dateAndTime (line 3) is what we'll be using to display the time and date in the browser. Finally, we'll use the format we used above from the Moment.js docs for the time and date (line 3).

var update = function () {
  date = moment();
  dateAndTime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
};

3. The next step is to write the logic so that we can display the time and date in the browser. And we're going to add these lines of code after the function we wrote above. This is where call the update() function (line 3) we created above, and which gets the current time from Moment.js. We use the setInterval() method to call this update() function and update it (i.e. the current time) every 1000 milliseconds (every second) (lines 3-4). In line 2, we're using jQuery to select an element with the ID of "date-and-time", which we haven't created yet, and setting it to a variable, dateAndTime.

$(document).ready(function () {
  dateAndTime = $('#date-and-time');
  update();
  setInterval(update, 1000);
});

4. So, let's go to our HTML now and create an element with an ID of "date-and-time". And we'll just create an empty <div> with the ID (line 3).

<body>
    <h1>Current Time</h1>
    <div id='date-and-time'></div>

    <!-- jQuery Link -->
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Link to JavaScript file -->
    <script src="assets/javascript/app.js" type="text/javascript"></script>

</body>

</html>

And that's it. We should be all set now. If we go back to app.js and review our entire code, we can see that the empty <div> that we just created is selected and set to the variable, dateAndTime (line 7). And this variable is used to display the time and date in the browser using the html() method (line 3), with the time and date format that we specified (line 3).

var update = function () {
  date = moment();
  dateAndTime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
};

$(document).ready(function () {
  dateAndTime = $('#date-and-time');
  update();
  setInterval(update, 1000);
});

And if we go to the browser and refresh the page, we get our current time and date in the browser. And you can't see it here in this still image, but the time is actually being updated every second.

Current Time and Date in the Browser

5. Lastly, let's add a little bit of our own text to show in the browser (lines 4-6).

var update = function () {
  date = moment();
  dateAndTime.html(
    '<p>The current time and date is ' +
      date.format('dddd, MMMM Do YYYY, h:mm:ss a') +
      '</p>'
  );
};

$(document).ready(function () {
  dateAndTime = $('#date-and-time');
  update();
  setInterval(update, 1000);
});

And there we go. We now have the current time and date in the browser, and the time updates dynamically every second in real time. And we also get our own text that we added: "The current time and date is".

Current Time and Date in the Browser