JavaScript has a built-in datatype that creates dynamic dates or stores current, previous, or future dates. Date objects can be created by using the new Date() method.
Once the date object is created, you can apply different operations to it. You can show a timer on your website using the date object.
The date in JavaScript is the number of milliseconds passed since the midnight of January 1, 1970, UTC. It is important to note that although the date in JavaScript is based on UTC when the JavaScript code is executed on a browser, it fetches the time zone from the host system:
Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:
- Use the F12 key in Chrome and other chromium-based browsers.
- Use CTRL SHIFT K keyboard shortcut keys for Mozilla.
- Use Option ⌘ C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ , and in Advanced tab check “Show Develop menu in menu bar”).
How to create a Date Object in JavaScript?
As mentioned above, a date object can be created with the new Date() method. To use a date object in JavaScript, we first need to create a variable and then store its date. The date in JavaScript is displayed as a full-text string.
var date = new Date();
console.log(date);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-422.png" data-lazy- height="58" src="data:image/svg xml,” width=”690″>
The new Date() function without any parenthesis creates an object with the current date. We can also pass arguments to the new Date() function to create new date objects with any specified date and time. The arguments use the following syntax in the new Date() function:
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Example:
var date = new Date(2001, 10, 10, 01, 37, 50, 50);
console.log(date);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-423.png" data-lazy- height="54" src="data:image/svg xml,” width=”688″>
In the above example, the 10th month is November; this is because JavaScript starts counting months from 0. So January is the 0th month in JavaScript.
We can pass (minimum) 1 to (maximum) 7 arguments to the new Date() function.
Now let’s try with five parameters:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-424.png" data-lazy- height="57" src="data:image/svg xml,” width=”687″>
The seconds are 00 by default.
In the same way, we can also give two, three, four, and six arguments. The order of the arguments will always remain the same unless we are only giving a single argument.
If only one parameter is supplied to the new Date() function, it will be considered as milliseconds:
var date = new Date(2001);
console.log(date);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-425.png" data-lazy- height="55" src="data:image/svg xml,” width=”692″>
The time shown in the screenshot above is 2001 milliseconds past midnight of January 01, 1970.
One or two-digit years will be considered from the previous century:
var date = new Date(9, 5);
console.log(date);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-426.png" data-lazy- height="57" src="data:image/svg xml,” width=”690″>
We can also pass a date string to the new Date() function:
var date = new Date(“November 10, 2001 01:37:50:50”);
console.log(date);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-427.png" data-lazy- height="62" src="data:image/svg xml,” width=”689″>
JavaScript Date Methods:
In JavaScript, we can use different methods to perform different actions on a date object. A few of these methods are discussed here:
The getFullYear() method:
The getFullYear() method can be used to get the year from the date object.
var date = new Date();
console.log(date.getFullYear());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-428.png" data-lazy- height="51" src="data:image/svg xml,” width=”692″>
The getMonth() method:
The getMonth() method returns the value of the month in the date object.
var date = new Date();
console.log(date.getMonth());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-429.png" data-lazy- height="52" src="data:image/svg xml,” width=”688″>
Note: This value is always one less than the actual month.
Similarly the getDate(), getHours(), getMinutes(), getSeconds() and getMilliseconds() can be used to get the individual values of Date, Hours, Minutes, Seconds and Milliseconds respectively.
The getTime() method:
The getTime method can be used to get the number of milliseconds that have passed since midnight Jan 1, 1970:
var date = new Date();
console.log(date.getTime());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-430.png" data-lazy- height="63" src="data:image/svg xml,” width=”692″>
The getDay() method:
The getDay() method is used to get the number of the weekdays in the date object. Days in JavaScript are numbered from 0 to 6, and the week starts from Sunday.
var date = new Date();
console.log(date.getDay());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-431.png" data-lazy- height="57" src="data:image/svg xml,” width=”692″>
The setFullYear() method:
The setFullYear() method is used to set the year of the date object. It can optionally set the month and the day of the date object as well.
var date = new Date();
console.log(date.getFullYear());
date.setFullYear(1993);
console.log(date.getFullYear());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-432.png" data-lazy- height="80" src="data:image/svg xml,” width=”692″>
The setMonth() method:
The setMonth() method is used to set the month in the date object.
var date = new Date();
console.log(date.getMonth());
date.setMonth(8);
console.log(date.getMonth());
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-433.png" data-lazy- height="78" src="data:image/svg xml,” width=”690″>
Similarly the setDate(), setHours(), setMinutes(), setSeconds() and setMilliseconds() can be used to set the individual values of Date, Hours, Minutes, Seconds and Milliseconds (respectively) in the date object.
The setTime() method:
The setTime method can be used to set time in milliseconds after midnight of Jan 01, 1970.
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-434.png" data-lazy- height="80" src="data:image/svg xml,” width=”691″>
Conclusion
Date object is an inbuilt data type that is used to store and display dates in JavaScript. Whenever you see a time counter or a countdown on a webpage, there is a date object behind it. Date objects are extremely useful when working with dates in JavaScript.
In this post, we discussed what a date object is and how to create it. Moreover, we also learned some methods which we can use to operate on a date object and manipulate it according to our needs.
Date objects can be very confusing and difficult to work with. Many JavaScript developers opt for third-party libraries instead of the inbuilt date object when they need to use dates in their code.
About the author
<img alt="" data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg611810d2a9589.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
