JavaScript has a Date object that you need to use to retailer details about any time limit. Dates in JavaScript principally characterize the overall variety of milliseconds which have handed for the reason that “Unix epoch”—for the reason that begin of January 1, 1970, UTC.
On this tutorial, we’ll learn to use the built-in strategies of the Date object to get and set the day, month, yr or time in JavaScript.
How one can Get the Present Date and Time
For example you need to get the present date and time on a person’s system. The simplest method to do this is to instantiate a brand new Date object utilizing the Date() constructor with out passing any parameters. Right here is an instance:
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Date Fri Jun 02 2023 08:04:45 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
The above code gave us again a Date object that’s now saved contained in the variable right now.
One other method of getting the present date and time includes merely calling the Date() perform with out the new key phrase. This may return a string illustration of the present date and time.
1 |
const right now = Date(); |
2 |
|
3 |
// Outptus: Fri Jun 02 2023 07:44:26 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
5 |
|
The ultimate result’s much like calling the toString() methodology on new Date() as proven beneath:
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Fri Jun 02 2023 08:04:45 GMT+0530 (India Normal Time)
|
4 |
console.log(right now.toString()); |
Get the Present 12 months
For example you solely need to know the present yr in JavaScript. You would extract that info from the above string. Nonetheless, it’s a lot simpler to easily name the getFullYear() methodology. This methodology will return the yr for the calling Date object in line with native time.
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: 2023
|
4 |
console.log(right now.getFullYear()); |
There may be one other methodology known as getYear() however it’s deprecated and also you should not use it. The getYear() methodology returns an integer that represents the present yr in line with native time, minus 1900. This methodology is deprecated and within the means of being eliminated.
Get the Present Month
You need to use the getMonth() methodology of the Date object in an effort to get the present month for a specific Date occasion. The returned month is an integer with a zero-based worth.
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Date Fri Jun 02 2023 08:53:09 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
5 |
|
6 |
// Outputs: 5
|
7 |
console.log(right now.getMonth()); |
As you possibly can see, we acquired again the quantity 5 when the present month was June.
Get the Present Day
You will get the present day of the week for a specific occasion of the Date object by merely calling the getDay() methodology. This methodology will return an integer between 0 and 6 the place 0 represents Sunday, 1 represents Monday and so forth.
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Date Fri Jun 02 2023 08:53:09 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
5 |
|
6 |
// Outputs: 5
|
7 |
console.log(right now.getDay()); |
I acquired the worth 5 again as a result of it’s Friday in line with my native time.
Get the Present Date
For example you need to get the day of the month for a specific Date occasion. You need to use the getDate() methodology on this case. It’s going to return a quantity between 1 and 31 representing the day of the month.
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Date Fri Jun 02 2023 08:53:09 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
5 |
|
6 |
// Outputs: 2
|
7 |
console.log(right now.getDate()); |
Get the Present Hour, Minute, or Second
There are three strategies known as getHours(), getMinutes(), and getSeconds() that you need to use to get the hours, minutes, and seconds for a specific date respectively.
1 |
const right now = new Date(); |
2 |
|
3 |
// Outputs: Date Fri Jun 02 2023 09:17:21 GMT+0530 (India Normal Time)
|
4 |
console.log(right now); |
5 |
|
6 |
// Outputs: 9
|
7 |
console.log(right now.getHours()); |
8 |
|
9 |
// Outouts: 17
|
10 |
console.log(right now.getMinutes()); |
11 |
|
12 |
// Outputs: 21
|
13 |
console.log(right now.getSeconds()); |
The hours go from 0 to 23. The minutes and seconds go from 0 to 59.
How one can Set the Date and Time
There can be occasions when you’ll have to take care of a selected second in time as an alternative of the present time. JavaScript makes it attainable so that you can set your personal date and time. Once more, the simplest method to do this is with the Date() constructor.
The Date() constructor accepts several types of parameters corresponding to a date string, a date object, or a bunch of integer values. A single integer worth represents the timestamp or the variety of milliseconds since midnight of January 1, 1970.
If you go two integers to the constructor, they’re thought of the yr and month respectively. You possibly can go 5 extra non-compulsory parameters which characterize the day, hour, minute, second, and millisecond. Any argument that you do not specify is routinely assigned the minimal attainable worth.
Whereas it’s attainable for various implementations to help a number of string codecs for specifying a date and time, it’s best to think about sticking to the usual format beneath:
1 |
YYYY-MM-DDTHH:mm:ss.sssZ |
Right here is an instance:
1 |
// Not All Platforms May Help This Format
|
2 |
const party_a = new Date('10 June, 2023 09:30:00'); |
3 |
|
4 |
// Format Supported Throughout All Platforms
|
5 |
const party_b = new Date('2023-06-10T21:30:00.000'); |
6 |
|
7 |
// Set the Timezone to UTC
|
8 |
const party_c = new Date('2023-06-10T21:30:00.000Z'); |
9 |
|
10 |
// Outputs: Date Sat Jun 10 2023 09:30:00 GMT+0530 (India Normal Time)
|
11 |
console.log(party_a); |
12 |
|
13 |
// Outputs: Date Sat Jun 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
14 |
console.log(party_b); |
15 |
|
16 |
// Outputs: Date Solar Jun 11 2023 03:00:00 GMT+0530 (India Normal Time)
|
17 |
console.log(party_c); |
We didn’t specify a timezone for our second date-time string. Due to this fact, its worth was interpreted as native time. Nonetheless, we did use Z in our third date-time string which implied that the time was in UTC. The return worth in all of the circumstances in nonetheless in native date and time.
How one can Set the 12 months
You need to use the setFullYear() methodology and go it the yr that you just need to set as its first parameter. This methodology additionally accepts two extra non-compulsory parameters which is able to characterize the month and date worth that you just need to set respectively. The month is an integer with worth starting from 0 to 11. The date can be an integer and might have any worth from 1 to 31.
Listed below are some examples:
1 |
const celebration = new Date('2023-06-10T21:30:00.000'); |
2 |
|
3 |
// Outputs: Date Sat Jun 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
4 |
console.log(celebration); |
5 |
|
6 |
celebration.setFullYear(2024); |
7 |
|
8 |
// Outputs: Date Mon Jun 10 2024 21:30:00 GMT+0530 (India Normal Time)
|
9 |
console.log(celebration); |
10 |
|
11 |
celebration.setFullYear(2024, 16, 12); |
12 |
|
13 |
// Outputs: Date Mon Could 12 2025 21:30:00 GMT+0530 (India Normal Time)
|
14 |
console.log(celebration); |
With the primary name to setFullYear() we have been in a position to change the yr of our celebration.
The second name is extra fascinating because it units the month to 16. Nonetheless, there are solely 12 months in a yr. Additionally it is necessary to notice that the months are zero-based so December is represented by 11. The values wrap round to the subsequent yr as soon as we attain December. There at the moment are 5 months left, so the ultimate month turns into Could.
The date is about to 12 primarily based on the worth of the third parameter.
How one can Set the Month
Just like setFullYear(), you need to use the setMonth() methodology to set each the month in addition to the day of the month in line with native time.
Overflowing values wrap round similar to they did within the earlier instance:
1 |
const celebration = new Date('2023-06-10T21:30:00.000'); |
2 |
|
3 |
// Outputs: Date Sat Jun 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
4 |
console.log(celebration); |
5 |
|
6 |
celebration.setMonth(1); |
7 |
|
8 |
// Outputs: Date Fri Feb 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
9 |
console.log(celebration); |
10 |
|
11 |
celebration.setMonth(1, 36); |
12 |
|
13 |
// Outputs: Date Wed Mar 08 2023 21:30:00 GMT+0530 (India Normal Time)
|
14 |
console.log(celebration); |
With a worth of 1, the month is about to February as a result of months are zero primarily based. Nonetheless, setting the date to 36 leads to an overflow. Since there have been solely 28 days in February in 2023, the remainder of the times are added to the month of March.
How one can Set the Date or Day of the Month
The setDate() methodology is beneficial for setting the day of the month for the calling date. This methodology solely accepts a single parameter which is able to replace the day of the month. As typical, any overflow will get rolled over into the subsequent month.
Right here is an instance:
1 |
const celebration = new Date('2023-06-10T21:30:00.000'); |
2 |
|
3 |
// Outputs: Date Sat Jun 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
4 |
console.log(celebration); |
5 |
|
6 |
celebration.setDate(33); |
7 |
|
8 |
// Outputs: Date Mon Jul 03 2023 21:30:00 GMT+0530 (India Normal Time)
|
9 |
console.log(celebration); |
June has 30 days. Due to this fact, setting the worth of date to 33 leads to an overflow and the precise date develop into July 3.
How one can Set the Hour, Minute and Second
You need to use strategies like setHours(), setMinutes(), setSeconds(), and setMilliseconds() to set the worth for hours, minutes, seconds, and milliseconds respectively.
Just like the setFullYear() methodology, the setHours() methodology can be helpful for setting the values of smaller items of time like minutes, seconds, and milliseconds. Listed below are some examples:
1 |
const celebration = new Date('2023-06-10T21:30:00.000'); |
2 |
|
3 |
// Outputs: Date Sat Jun 10 2023 21:30:00 GMT+0530 (India Normal Time)
|
4 |
console.log(celebration); |
5 |
|
6 |
celebration.setHours(12); |
7 |
|
8 |
// Outputs: Date Sat Jun 10 2023 12:30:00 GMT+0530 (India Normal Time)
|
9 |
console.log(celebration); |
10 |
|
11 |
celebration.setHours(12, 102, 53); |
12 |
|
13 |
// Outputs: Date Sat Jun 10 2023 13:42:53 GMT+0530 (India Normal Time)
|
14 |
console.log(celebration); |
15 |
|
16 |
celebration.setMinutes(36, 53); |
17 |
|
18 |
// Outputs: Date Sat Jun 10 2023 13:36:53 GMT+0530 (India Normal Time)
|
19 |
console.log(celebration); |
20 |
|
21 |
celebration.setSeconds(153); |
22 |
|
23 |
// Outputs: Date Sat Jun 10 2023 13:38:33 GMT+0530 (India Normal Time)
|
24 |
console.log(celebration); |
The primary output relies on the supplied date. Within the subsequent one, we merely set the hours to 12 with out altering the rest. Our subsequent assertion, units the hours to 12 however the minutes to 102. Since there may be an overflow, the hours develop into 13 and the minutes develop into 42.
After that, we set the minutes to 36 and the seconds to 53. The hours keep at 13 attributable to our earlier assertion. Our ultimate assertion units the seconds for our Date object. Nonetheless, there may be an overflow so the minutes enhance by 2 and the seconds develop into 33.
Remaining Ideas
On this tutorial, we realized the fundamentals of getting and setting totally different values of the Date object utilizing built-in strategies. You must now be capable of get the yr, month, days, hours, minutes, or seconds of any date in JavaScript. Equally, it is possible for you to to set these values with out getting confused attributable to any overflow.
