Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Get Current Date and Time in JavaScript
This tutorial teaches us to get the date and time in JavaScript. Nowadays, JavaScript is the most popular programming language used for user interaction with the browser. We can say that it is hard to find a single web application that does not use JavaScript.
The purpose of creating this tutorial is to make programmers familiar with the Date() object. Users can get today’s date and current time using the date class. While developing the applications, programmers maybe need to show the current date and time according to the user’s local zone, and we can fill this requirement using the date class. Also, sometimes we need to store the user’s session start and end times in our app database.
To solve all the problems, we just create an object of date class and use its various methods to get the current date and time in this tutorial.
Get Date and Time using the Date Object
Get date and time using the toLocaleString() Method
Get Date and Time using the Date Object
The Date class contains several methods; we can fetch the current date, day, and time by using them. Also, it includes hundreds of different methods that programmers can use according to their requirements.
Syntax
Users can follow the below syntax for different methods-
let newDate = new Date(); // create the new object of the date class
Using the below syntax users can get the year, month and date.
let year = newDate.getFullYear(); // returns the current year let month = newDate.getMonth(); // returns month between 0 to 11. Users need to add +1 to the returned value to get current month. let todaySDate = newDate.getDate() // returns today’s date.
Using the below syntax users can get hours, minutes, and second.
let hours = newDate.getHours(); //returns the current hours of the day let minutes = newDate().getMinutes(); // returns the current minutes of hours let seconds = newDate.getSeconds(); // returns current the seconds of minutes
Example
The below example explains how to use the above methods to get the date and time from the Date object. Also, we have added +1 to the returned value from the month as it returns values between 0 and 11.
<html>
<head>
<title>Get date and time in JavaScript.</title>
</head>
<body>
<h2>Get date and time using JavaScript.</h2>
<h4>Output after using the basic methods of the Date() class.</h4>
<div id="date"> </div>
<div id="time"> </div>
<script type="text/javascript">
let date = document.getElementById("date");
let time = document.getElementById("time");
// creating the date object and getting the date and time
let newDate = new Date();
let year = newDate.getFullYear();
let month = newDate.getMonth();
let todaySDate = newDate.getDate();
let hours = newDate.getHours();
let minutes = newDate.getMinutes();
let seconds = newDate.getSeconds();
date.innerHTML = " " + todaySDate + "/ " + month + "/ " + year;
time.innerHTML = hours + ": " + minutes + ": " + seconds;
</script>
</body>
</html>
In the above output, users can see that we are getting the current date and time according to the local time zone.
Get Date and Time using the toLocaleString() Method
In this approach, we will use the Date object the same way as the above approach, But here we will use the different advanced methods. We will use the toLocalString() method. It takes two parameters, one is locale, and another is options. Locale means the local zone or region for which you want to take data and options is the object which contains many properties.
Syntax
Users can follow the syntax below to use advanced data object methods-
let date = new Date(); let dateAndTime = date.toLocaleString(); // returns the date and time both. let date = date.toLocaleDateString(); // returns the date only. let time = date.toLocaleTimeString(); // returns the time only.
Users can follow the below syntax, if they want to get date and time for any local region.
let options = {
year: ‘numeric’,
month: ‘long’,
day: ‘numeric’,
weekday: ‘long’,
}
let date = date.toLocaleString( locale, options);
Parameters
locale − The local parameter represents the Unicode for the local region. If you want to get the current date and time of India, you should pass ‘en-IN’, for the US users can pass the ‘en-US’.
options − The options can contain lots of properties to format the date and time. For example, in above syntax we have written that return the year and day in numeric format and return the weekday and month in long format.
Example
The below example demonstrate to use the toLocaleString() method to get the get and time for any specific region.
<html>
<head>
<title>Get date and time in JavaScript.</title>
</head>
<body>
<h4>Output after using toLocaleString() Method.</h4>
<div id="dateAndTime"> </div>
<h4> Output after using toLocaleDateString() Method.</h4>
<div id="date"> </div>
<h4> Output after using toLocaleTimeString() Method. </h4>
<div id="time"> </div>
<h4> Output after using toLocaleString() Method with locale 'en-IN'. </h4>
<div id="dateIN"> </div>
<h4> Output after using toLocaleString() Method with local 'en-US'. </h4>
<div id="dateUs"> </div>
<script type="text/javascript">
let dateAndTime = document.getElementById("dateAndTime");
let date = document.getElementById("date");
let time = document.getElementById("time");
let dateIN = document.getElementById("dateIN");
let dateUs = document.getElementById("dateUs");
// creating the date object and using the toLocaleString() method
let newDate = new Date();
dateAndTime.innerHTML = newDate.toLocaleString();
date.innerHTML = newDate.toLocaleDateString();
time.innerHTML = newDate.toLocaleTimeString();
// options for the toLocaleString() method
var options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', };
dateIN.innerHTML = newDate.toLocaleString("en-IN", options);
dateUs.innerHTML = newDate.toLocaleString("en-US", options);
</script>
</body>
</html>
In the last two outputs, users can see that we are getting different date formats according to the region.
Conclusion
The Date class contains many advanced methods to get the date and time. However, users can get the whole date and time string using the built-in methods.
Users can get date and time information according to their requirements using various methods of date class. Also, toLocaleString() methods allow you to get regional dates and times. Furthermore, it will enable you to format the date and time according to your need by passing the options object as a parameter.
9K+ Views
