How to Create Current Date and Time Using JavaScript

How to Current time and date using javascript
How to Current time and date using javascript
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

How to Create the Current Date and Time Using JavaScript

Hi, In this article I will show you how to create current Date and Time Using JavaScript. You will also learn to create a digital clock with the current date and current location.

You will also learn how to display a 12 hours time format in JavaScript with AM and PM. We will use the JavaScript setTimeout() method, to call a function or evaluate an expression after a specified number of milliseconds. In this post, we will create a current date and a digital clock with auto-refreshing every 1 second.

Important search Terms:

  • How to refresh the clock time every 1 seconds javascript?
  • Javascript reload the page at a specific time
  • How to auto-reload date and time in JavaScript after 1 second?
  • JavaScript auto refresh time without reloading the page.
  • javascript refresh page if no activity

[Vido Tutorial] How to Create Current Date and Time Using JavaScript]

Now, you can watch the complete step-by-step video tutorial to build a digital clock with current date and time using JavaScript, CSS, and HTML.

How to Create Current Date and Time Using JavaScript

Source Codes

Now, it’s time to get the free source codes to create the current time and date with 12 hours format using HTML JavaScript.

HTML Source Code

Following is the HTML source code to display the current date and time on your web page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time and Date</title>
  <!-- CSS code -->
  <style>
    body{
      text-align: center;
      background-image: url(image.png);
    }
    .date{
      width: 200px;
      padding: 15px;
      background-color: black;
      color: greenyellow;
      margin: 0 auto;
      font-size: 30px;
      font-weight: bolder;
    }
    h1{
      font-size: 50px;
      font-weight: 900;
    }
  </style>
  
</head>
<body onload="startTime()">
  <!-- Auto refreshing Current Date and time -->
  <h1>Current Date</h1>
  <div class="date" id="currentDate"></div>
  <h1>Current Time</h1>
  <div class="date" id="currentTime"></div>
  <h1>Current Clock Date and Time</h1>
  <strong class="date" id="DateTime"></strong>

</body>    
</html>

In the above HTML code, I include the onload=”startTime()” attribute in the body element. We will create the startTime function in the JavaScript section. This function will refresh the time and date on every page reload. I have added the small CSS code to style the date and time section.

JavaScript Source Code

After that, find below the JavaScript code to create the current time and date with 12 hours format. You can copy and paste the below code at the bottom of your HTML code inside the body section.

<!-- Javascript code -->
  <script>
    var today = new Date();  /* new date object */
    var date = today.getDate() + ' / ' + (today.getMonth() + 1) + ' / ' + today.getFullYear();
    /* display current date */
    document.getElementById("currentDate").innerHTML = date;

    /* Auto refreshing clock time */
    function startTime() {
      var today = new Date(); /* new date object */
      /* getting minutes hours and seconds from date object */
      var hours = today.getHours();
      var minutes = today.getMinutes();
      var seconds = today.getSeconds();
      /* 12 hour time formate */
      var amPm = "AM";
      if ( hours > 13 ) {
        amPm = "PM";
        hours = hours-12;
      }
      /* put zero before numbers < 10 */
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }

      var time = hours + ' : ' + minutes + ' : ' + seconds + '  ' + amPm;
       /* display current time */
       document.getElementById("currentTime").innerHTML = time;

       /* Auto refreshing time every 1 second */
       setTimeout(function(){startTime()}, 1000 );

       /* Time with date and current location */
       document.getElementById("DateTime").innerHTML = today;

    }

  </script>

Let’s try to understand the above JS code. I added +1 to the getMonth() function because the function give the output from 0 to 11. The 0 indicates the first month of the year which is January. By adding +1 we will get the exact number of the current month.

setTimeout(function(){startTime()}, 1000 )

The setTimeout function is a native JavaScript function. It sets a timer (a countdown set in milliseconds) for the execution of a callback function, calling the function upon completion of the timer. This function will set the clock time auto-refresh after every 1 second.

Final Words

In this post you got a complete understanding to create a digital clock with the current date and time using javascript. If you feel any difficulty while understanding the above source code feel to comment on my YouTube Channel. If you find it helpful please don’t forget to subscribe to my YouTube Channel to watch more useful tutorials.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

4 Responses

  1. I must thank you for the efforts youve put in penning this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has motivated me to get my very own blog now 😉

  2. Thanks so much for giving everyone remarkably marvellous opportunity to read articles and blog posts from this website. It’s always so awesome and as well , stuffed with a lot of fun for me personally and my office colleagues to visit your site at least thrice in 7 days to see the fresh tips you will have. And lastly, I’m so at all times amazed for the attractive points served by you. Certain 1 tips in this posting are in reality the very best I’ve ever had.

Leave a Reply

Your email address will not be published.