Display Current Date and Time in HTML using JavaScript

Display Current Date and Time in HTML using JavaScript

In this tutorial, you will learn how to display current system date and time in HTML using JavaScript.

Will take an example to display current Date and Time in H2 html tag with using javascript document.getElementById(“ID”).innerHTML. As well as display current day name.

JavaScript Code to Display Current System Date and Time

JavaScript Code

  var today = new Date();
  var day = today.getDay();
  var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date+' '+time;

  document.getElementById("displayDateTime").innerHTML = dateTime + ' <br> Day :- ' + daylist[day];

HTML Source Code with JavaScript

<html>
<head>
  <title>Display Current Date and Time in Html using Javascript</title>
</head>
<body>
  <h1>Get current date using JavaScript.</h1>

  <h2 id="displayDateTime"></h2>
</body>
  <script type="text/javascript">
  var today = new Date();
  var day = today.getDay();
  var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date+' '+time;
  
  document.getElementById("displayDateTime").innerHTML = dateTime + ' <br> Day :- ' + daylist[day];

  </script>
</html>

You can learn more about the JavaScript date and time methods:

Get Current Date & Time in JavaScript

Use Date() method to create an object in JavaScript with current date and time. This provides output in UTC timezone.

var today = new Date();

1. Current Date in JavaScript

Use the following script to get the current date using JavaScript in “Y-m-d” format.

var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  • getFullYear() – Provides current year like 2020.
  • getMonth() – Provides current month values 0-11. Where 0 for Jan and 11 for Dec. So added +1 to get result.
  • getDate() – Provides day of the month values 1-31.

2. Current Time in JavaScript

Use the following script to get the current time using JavaScript in “H:i:s” format.

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  • getHours() – Provides current hour between 0-23.
  • getMinutes() – Provides current minutes between 0-59.
  • getSeconds() – Provides current seconds between 0-59.

3. Current Date & Time Both in JavaScript

Use the following script to get the current date and time using JavaScript in “Y-m-d H:i:s” format. You can simply combine the output of the above JavaScript code in one variable as below:

var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;

Recommended JavaScript Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

3 replies to Display Current Date and Time in HTML using JavaScript

  1. thanks, it’s very helping

  2. Thanks Buddy you made my day, but what if I want to display date as 23 June 2022 then what pls reply.

  3. Thank you !! yiu are Good !!

Leave a Reply

Your email address will not be published. Required fields are marked *