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.
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.
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.
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.
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.
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.
