How to Get Current Date & Time in JavaScript

October 22, 2019

Introduction

JavaScript is a light-weight programming language used for the World Wide Web. The JavaScript Date object is useful for checking the date and time a visitor arrives at your website.

This guide will walk you through using JavaScript to get the current date and time from a client.

Tutorial on how to get Current Date and Time in JavaScript.

Prerequisites

  • Familiarity with JavaScript (including creating, saving, and running scripts).
  • A text editor to write scripts.
  • Access to a browser to open HTML files.

Create the Date Object in JavaScript

The JavaScript Date() object helps when working with dates. To create a new object the with current date and time, add the object to your script:

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Demo: Current Date</h1>
<p id="p1"></p>
<script>
	var date = new Date();
	document.getElementById("p1").innerHTML = date;
</script>
</body>
</html>

Save the code into a .html file and open using your browser.

javascript date object html

The object shows the current date, time, and timezone.

Below are methods to get individual date and time elements.

Use the Get Method to Show the current Date in JavaScript

If you want to get the date in the YYYY-MM-DD format, create an HTML document, and add the following code:

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Demo: Current Date</h1>
<p id="p1"></p>
<script>
	var date = new Date();
	var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
	document.getElementById("p1").innerHTML = current_date;
</script>
</body>
</html>

The second line in the script consist of the following instructions:

  • date.getFullYear() – Uses the today variable to display the 4-digit year.
  • date.getMonth()+1 – Displays the numerical month. The +1 converts the month from digital (0-11) to normal.
  • date.getDate() – Displays the numerical day of the month.
javascript current date html

If you prefer a different format, simply change the order of the commands.

Note: There is a dash between each command. This creates a dash between each segment of the date.

Display Hours, Minutes, and Seconds using JavaScript

To show the time in HH:MM:SS format, edit your script to look as follows:

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Demo: Current Date</h1>
<p id="p1"></p>
<script>
	var date = new Date();
	var current_time = date.getHours()+":"+date.getMinutes()+":"+ date.getSeconds();
	document.getElementById("p1").innerHTML = current_time;
</script>
</body>
</html>
  • date.getHours() – This uses the today variable to display the current hour. This uses a 24-hour clock.
  • date.getMinutes() – Displays the current minute reading.
  • date.getSeconds() – Displays the current seconds reading.
javascript current time html

Note: There is a colon between each command. This places a colon between each numeric display so that it reads like a clock.

Show the Full Current Date and Time in JavaScript

Combine the two commands to show full date and time in the YYYY-MM-DD and HH:MM:SS formats. Edit your script as follows:

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Demo: Current Date</h1>
<p id="p1"></p>
<script>
	var date = new Date();
	var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
	var current_time = date.getHours()+":"+date.getMinutes()+":"+ date.getSeconds();
	var date_time = current_date+" "+current_time;	
	document.getElementById("p1").innerHTML = date_time;
</script>
</body>
</html>

The final line combines the two other pieces of code. This instructs the system to display the full date next to the full time.

javascript current date and time html

Conclusion

You should now be able to write a simple piece of JavaScript to retrieve the current date and time. This can be useful for creating a timestamp, by linking this script with an action and writing it in to a log file.

Was this article helpful?
YesNo
Sofija Simic
Sofija Simic is an experienced Technical Writer. Alongside her educational background in teaching and writing, she has had a lifelong passion for information technology. She is committed to unscrambling confusing IT concepts and streamlining intricate software installations.
Next you should read
How to Check Python Version in Linux, Mac, & Windows
October 1, 2019

Python is a popular programming language with different versions organized by release date. Certain...
Read more
Linux File Permission Tutorial: How to Check and Change Permissions
September 17, 2019

The file permission feature specifies how much power each user has over a given file or directory. To...
Read more
22 Best Linux Text Editors for Programming & Coding
September 3, 2019

A text editor is an application that lets you type text. All Linux distributions come with built-in editors...
Read more
How To Install and Use PHP Composer on Ubuntu
August 29, 2019

Composer is an application that tracks dependencies for a project, allowing you to specify a set of libraries...
Read more