When we build real-world applications, one type of data that comes up all the time is dates and times. So let's learn the fundamentals of dates and times in this lecture so that we can put that into practice in the next one.
The first way to create a date is by simply calling the
Date constructor function without any parameters. This will create a date object that represents the current date and time.
const now = new Date(); console.log(now);
The second way to parse a date from a date string.
// 👇🏽 Date string taken from the above console.log console.log(new Date('Sep 07 2022 14:58:47')); // We will get the same date as above
console.log(new Date('November 20, 1998'));
Next, we can also pass in the year, month, day, hour minute and even second to the
Date constructor function.
// You can also add the last parameter, the millisecond console.log(new Date(1998, 10, 20, 12, 30, 45));
You might have noticed that the second parameter which is the month is 10 but in the log in the console, it says November which is actually the 11th month. Hence, that means that the month parameter is zero-based. Yeah it's actually weird 😅, but we just have to get used to that.
console.log(new Date(2022, 1, 31));
Finally, we can also pass into the
Date constructor function the number of milliseconds since January 1st, 1970. This is called the Unix Epoch.
/** * Zero milliseconds since January 1st, 1970 */ console.log(new Date(0));
Yeah, it feels a bit strange but with time and practice, you will get used to it. Now, let's create a date that is three days after the unix epoch.
/** * 3 ==> 3 days * 24 ==> A day has 24 hours * 60 ==> An hour has 60 minutes * 60 ==> A minute has 60 seconds * 1000 ==> A second has 1000 milliseconds */ console.log(new Date(3 * 24 * 60 * 60 * 1000));
The above number we calculated (
3 * 24 * 60 * 60 * 1000) is called the timestamp or the timestamp of the day number 3. And we will see why this is useful later.
console.log(3 * 24 * 60 * 60 * 1000); // 259200000
Let's start once more by creating a date and storing it in a variable.
const date = new Date(2015, 10, 28, 12, 30);
The first method we will look at is the
getFullYear method. This method will return the year of the date.
console.log(date); console.log(date.getFullYear()); // 2015
There is also
getYear, but never use that ‼️.
Next up, we have the
getMonth method. This method will return the month of the date. However, it will return the month as a zero-based number.
console.log(date.getMonth()); // 10
Next, we have the
console.log(date.getDate()); // 28
The method name is a bit misleading but that's actually the day of the month. To get the day of the week, we have the
console.log(date.getDay()); // 4
Same as the month, the day of the week is also zero-based. Hence, 0 is Sunday, 1 is Monday, 2 is Tuesday, 3 is Wednesday, and so on.
Besides the day of the week, we can also get the hour, minute, second, and millisecond of a date.
console.log(date.getHours()); // 12 console.log(date.getMinutes()); // 30 console.log(date.getSeconds()); // 0 console.log(date.getMilliseconds()); // 0
We can also get a nicely formatted string similar to what we saw in the console when we logged the
coonsole.log(date.toISOString()); // 2015-11-28T11:30:00.000Z
Finally, we can also get the timestamp of a date. Remember that the timestamp is the number of milliseconds since January 1st, 1970.
console.log(date.getTime()); // 1448710200000
We can now get that timestamp and reverse it to get the date.
console.log(new Date(1448710200000)); // This will give us the initial date we created above
Timestamps are actually so important that there is a special method that we can use to get the current timestamp.
So if you want the current timestamp, you don't even need to create a new date. All you have to do is call the
/** * This is my current timestamp so it will be different from yours */ console.log(Date.now()); // 1663154377916
To finish, there are also the
set versions of the methods we saw above, and they also perform autocorrections just like when we create a new date. So for example, we can use the
setFullYear method to set the year of a date.