Display Current Date And Time In HTML Using JavaScript

Last Updated : Mar 11, 2024

IN - JavaScript HTML | Written & Updated By - Amruta

In this tutorial we will show you the solution of display current date and time in HTML using JavaScript, since date and time are such an integral aspect of our daily lives, they play a crucial role in computer programming.

You could need to construct a website with a calendar, a rail timetable, or an interface for scheduling appointments in JavaScript.

These apps must display relevant times based on the user's current timezone, or calculate arrivals and departures, as well as start and end times.

You may also need to utilise JavaScript to generate a report at a specific time each day, or to filter through restaurants and establishments that are currently operating.

The built-in Date object and related methods in JavaScript help you achieve all of these goals and more. The format and use of date and time in JavaScript will be covered in this tutorial.

Step By Step Guide On Display Current Date And Time In HTML Using Javascript :-

Creating a Date Object.

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var today = new Date();
</script>
</body>
</html>

When working with dates, the JavaScript Date object comes in handy. Put the Date variable to your script to create a new object with the current date and time:

To display the current date in JavaScript, use the Get method.

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var date = time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate();
</script>
</body>
</html>

To get the date in YYYY-MM-DD format, update the date test.html file and add the variable:
The instructions on the second line are as follows: date.getFullYear() – Utilises the today variable to display the 4-digit year.
date.getMonth()+1 – Gives outputs as the numerical month – the +1 converts the month from digital (0-11) to normal.
date.getDate() – Gives output as the numerical day of the month.
Change the sequence of the commands if you desire a different arrangement.

Using JavaScript, display the hours, minutes, and seconds.

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var today= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
</script>
</body>
</html>

Edit your script to look like this to show the time in HH:MM:SS format:
time.getHours() – This uses the today variable to display the current hour. This uses a 24-hour clock.
time.getMinutes() – Displays the current minute reading.
time.getSeconds() – Displays the current seconds reading.

Display the current date and time in their full format.

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var date = time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate();
var today= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
var dateTime = date+' '+time;
</script>
</body>
</html>

To show the entire date and time in the YYYY-MM-DD and HH:MM:SS formats, combine the two instructions. Make the following changes to your script:
The final line joins the two bits of code together. This tells the system to show the entire date alongside the complete time.

Conclusion :-

You should now be able to retrieve the current date and time using simple JavaScript. By tying this script to an action and writing it to a log file, it may be used to create a timestamp.

Knowing how to work with dates is important for many basic JavaScript jobs, since it allows you to perform everything from set up a repeating report to showing dates and schedules in the proper time zone.

I hope this tutorial on display current date and time in HTML using JavaScript helps you.

About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪