DevOps

How to Get Current Date & Time in JavaScript

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.

Đăng ký liền tay Nhận Ngay Bài Mới

Subscribe ngay

Cám ơn bạn đã đăng ký !

Lỗi đăng ký !

Add Comment

Click here to post a comment

Đăng ký liền tay
Nhận Ngay Bài Mới

Subscribe ngay

Cám ơn bạn đã đăng ký !

Lỗi đăng ký !