1
00:00:00,300 --> 00:00:06,950
And welcome to JavaScript Dete Lesson, we're going to take a closer look at what's available for date.

2
00:00:07,230 --> 00:00:12,090
Now, there's a lot of different ways to use JavaScript date, so let's take a closer look at some of

3
00:00:12,120 --> 00:00:14,070
the options we have available for date.

4
00:00:14,370 --> 00:00:20,130
And there's several ways to create the date object where you can set that current date.

5
00:00:20,160 --> 00:00:24,320
So if you just do a new date getting the date object, that's going to get the current date.

6
00:00:24,570 --> 00:00:27,580
You can also set the date object to a particular date.

7
00:00:27,850 --> 00:00:33,300
There's a number of different ways that you can set the date object so you can divide it up within the

8
00:00:33,300 --> 00:00:37,380
year, the month, the date, the hour, the minute, the second.

9
00:00:37,560 --> 00:00:38,790
So you can set it that way.

10
00:00:39,030 --> 00:00:42,090
Or as well, you can write in a number of different ways.

11
00:00:42,240 --> 00:00:47,550
And this is all going to create that same date object, although the third one here is going to create

12
00:00:47,550 --> 00:00:52,500
it at a default time because we're not specifying the time of that date object.

13
00:00:53,490 --> 00:00:55,190
So let's see what else we can do with date.

14
00:00:55,200 --> 00:00:57,620
And there are a lot of things you can do with date.

15
00:00:57,870 --> 00:01:03,480
So the way that date works is that JavaScript creates a date instance that represents a single moment

16
00:01:03,480 --> 00:01:04,080
in time.

17
00:01:04,080 --> 00:01:10,770
We can take a closer look at that within the Bobzilla developer network at the docks where we've got

18
00:01:10,770 --> 00:01:12,450
several different examples of date.

19
00:01:12,690 --> 00:01:15,890
So date is written and this is actually the same date.

20
00:01:15,930 --> 00:01:20,160
So there's more information as to how to use date, of course, down below.

21
00:01:20,380 --> 00:01:26,400
And there are a lot of things, including looking at the time stamp, which is a representation of a

22
00:01:26,400 --> 00:01:30,300
number milliseconds since January 1st, 1970.

23
00:01:30,660 --> 00:01:36,000
And we can calculate out how many seconds since that time as well.

24
00:01:36,000 --> 00:01:38,910
You can get the year, you can get the month.

25
00:01:38,910 --> 00:01:40,320
And this is a zero based.

26
00:01:40,330 --> 00:01:41,640
So starting at zero.

27
00:01:41,640 --> 00:01:43,060
So January is zero.

28
00:01:43,170 --> 00:01:44,340
December is 11th.

29
00:01:44,520 --> 00:01:50,850
So keep that in mind when you are creating the dates that when you are using month index that this is

30
00:01:50,850 --> 00:01:51,630
zero based.

31
00:01:51,840 --> 00:01:52,790
There's also the day.

32
00:01:52,820 --> 00:01:59,010
So this is an integer representing the day, hours, minutes, seconds, and you can even go to milliseconds.

33
00:01:59,370 --> 00:02:06,300
And if you are getting the milliseconds once again, it is based on that January 1st, 1970, and the

34
00:02:06,300 --> 00:02:09,360
date object range is one hundred million.

35
00:02:09,360 --> 00:02:12,680
So negative hundred million to plus one hundred million.

36
00:02:12,720 --> 00:02:18,660
And the good thing about the data, the date object is it provides a uniform behavior across platforms.

37
00:02:19,020 --> 00:02:24,720
So if we use date now, it returns a numeric value corresponding to the current time, minus the number

38
00:02:24,720 --> 00:02:28,620
of milliseconds that have elapsed since January 1st, 1970.

39
00:02:28,920 --> 00:02:34,470
And there's also more that you can do within the date prototype where you can get the dates as well

40
00:02:34,470 --> 00:02:39,360
as the day, the full year, the hours, the milliseconds from the date object.

41
00:02:39,480 --> 00:02:41,640
Once you can get something, you can also set it.

42
00:02:41,880 --> 00:02:44,620
So setting the date, setting the full year set in the hours.

43
00:02:44,760 --> 00:02:47,220
So this gives you the ability to manipulate the date object.

44
00:02:47,250 --> 00:02:48,970
So we try it within the editor.

45
00:02:48,990 --> 00:02:51,550
So first of all, let's get our new date.

46
00:02:51,590 --> 00:02:56,640
So just using the due date of method in order to set that date, and I'm going to output it into the

47
00:02:56,640 --> 00:02:59,400
console so we can see what is contained within date.

48
00:03:00,180 --> 00:03:02,810
So it provides a string value of the current date.

49
00:03:02,880 --> 00:03:06,600
There's also using the date object and we can get now.

50
00:03:06,780 --> 00:03:08,040
So that returns back again.

51
00:03:08,040 --> 00:03:15,000
Those millisecond we can create a new date as well so we can take D so creating a new date object and

52
00:03:15,000 --> 00:03:15,870
we can set the date.

53
00:03:15,870 --> 00:03:18,140
And then we saw there's a number of different ways to set it.

54
00:03:18,420 --> 00:03:24,870
So if we want to set it to twenty twenty and this is November, so keeping in mind zero based for the

55
00:03:24,870 --> 00:03:29,880
month, we can set hours, we can set minutes, we can set seconds.

56
00:03:29,880 --> 00:03:31,660
We can even set milliseconds if we want.

57
00:03:32,070 --> 00:03:34,320
So we've got Sunday, November 15th.

58
00:03:34,320 --> 00:03:35,130
Twenty twenty.

59
00:03:35,670 --> 00:03:39,570
So that's the year, the month, the day and so on.

60
00:03:39,580 --> 00:03:44,940
So that's the hours, the minutes, the seconds and the milliseconds and notice again.

61
00:03:44,940 --> 00:03:48,420
So if we go to 11, that sets up to December.

62
00:03:48,540 --> 00:03:53,250
If we do 12, then what happens is we end up with January.

63
00:03:53,430 --> 00:03:57,600
So January is 12 and it's also zero, but we're adding to the year.

64
00:03:57,600 --> 00:03:59,550
So we're just incrementing the date.

65
00:03:59,820 --> 00:04:05,640
So if you had a particular value, if you wanted to add to that date value, so if you had, let's say,

66
00:04:05,640 --> 00:04:12,540
for instance, you had 11 and you want to return back and increase it by one, you can always add one

67
00:04:12,540 --> 00:04:16,560
to the value and that will increment and change the current date object that's being output.

68
00:04:17,070 --> 00:04:17,640
New date.

69
00:04:17,640 --> 00:04:19,560
You can also use the milliseconds as well.

70
00:04:19,560 --> 00:04:20,730
So setting date.

71
00:04:21,000 --> 00:04:26,910
And if you set it to zero, you're going to see that you're going to get that December 31st, nineteen

72
00:04:26,910 --> 00:04:30,350
sixty nine at seven p.m. because this is GTM time.

73
00:04:30,630 --> 00:04:38,250
So using that same date starting January 1st, 1970, and we can count up from their number of milliseconds,

74
00:04:38,880 --> 00:04:40,170
we get 2001.

75
00:04:40,350 --> 00:04:47,540
And if we had another zero and this is again milliseconds from that January 1st, 1970.

76
00:04:47,730 --> 00:04:54,750
So now we're at twenty twenty six to eight as the year that we can apply string methods to it and outputting

77
00:04:54,750 --> 00:04:59,910
it as a string so it returns a date portion of a date object and human readable English.

78
00:05:01,110 --> 00:05:06,910
So Wednesday, April 3rd, 2019, to you see it converted and this is more use than the UTC story.

79
00:05:06,960 --> 00:05:10,010
And as we saw, there's a number of different ways to set the date.

80
00:05:10,350 --> 00:05:17,550
So if you are to take the dates and create a new date object from various formats, and this is really

81
00:05:17,550 --> 00:05:24,870
super useful because of the fact that we can utilize it from different input formats.

82
00:05:25,140 --> 00:05:29,200
So we see that this one, we can set the month as well.

83
00:05:29,250 --> 00:05:35,220
And it comes back December because we're not using the zero based we're using a string value in order

84
00:05:35,220 --> 00:05:35,910
to set the date.

85
00:05:36,330 --> 00:05:41,280
And we can use the dashes, we can use the slashes.

86
00:05:41,430 --> 00:05:47,490
And there's a number of other formats that can be used as a standard in order to output and create the

87
00:05:47,490 --> 00:05:47,910
dates.

88
00:05:47,970 --> 00:05:50,810
You can also get values from the dates.

89
00:05:50,810 --> 00:05:55,320
So if we do D equals so the get date gets the date.

90
00:05:55,340 --> 00:05:59,390
So this is returning back the date and it's going to move a few things around here.

91
00:05:59,430 --> 00:06:08,080
So I'm going to set up the vowel as it's probably better to set Val and then also using D.

92
00:06:09,510 --> 00:06:11,700
So it's getting the fourth day of the week.

93
00:06:12,090 --> 00:06:19,800
Date is getting the date, so the numeric value and then get date is getting the day of the week.

94
00:06:19,830 --> 00:06:23,640
So this is a value from zero to second.

95
00:06:23,760 --> 00:06:26,650
And if we update it to 27, then we see it starts at zero.

96
00:06:26,670 --> 00:06:28,870
We can also get the time as well.

97
00:06:28,890 --> 00:06:29,890
So that's another option.

98
00:06:30,810 --> 00:06:33,050
So as mentioned, there's a ton of different options here.

99
00:06:33,420 --> 00:06:36,950
So the time once again is returning back that numeric timestamp.

100
00:06:37,500 --> 00:06:44,790
So it's milliseconds again, can do value add D get milliseconds so you can get the full year, you

101
00:06:44,790 --> 00:06:47,060
can get ours, you can get millisecond.

102
00:06:47,070 --> 00:06:52,530
And because we didn't define any, it's set to zero because this one is zero where we're setting the

103
00:06:52,530 --> 00:06:53,430
milliseconds.

104
00:06:53,640 --> 00:06:55,050
Let me comment all of those out.

105
00:06:55,050 --> 00:06:55,800
We see that now.

106
00:06:55,800 --> 00:07:00,480
We can see that we've got 34 the milliseconds and now we've got 40 for the millisecond.

107
00:07:00,480 --> 00:07:04,170
We also get minutes, get the month, get the seconds, get the time.

108
00:07:04,350 --> 00:07:06,570
And there's also one called Time Zone Offset.

109
00:07:06,810 --> 00:07:11,520
So it returns that time zone offset from UTC in minutes for the current local time.

110
00:07:11,550 --> 00:07:12,630
So that's another useful one.

111
00:07:12,990 --> 00:07:18,660
Depending on where you're getting these date objects, you might want to use the local time or the UTC

112
00:07:18,660 --> 00:07:19,000
time.

113
00:07:19,020 --> 00:07:24,330
So if you get milliseconds in UTC, it's actually going to be the same because that's not being affected.

114
00:07:24,480 --> 00:07:29,550
The one that's actually being affected is the hours if we get ours and then UTC hours, you're going

115
00:07:29,550 --> 00:07:32,340
to see that there is a difference between get hours and UTC hours.

116
00:07:32,340 --> 00:07:35,930
So UTC is ten because that's getting it, according it to universal time.

117
00:07:35,940 --> 00:07:37,990
And then this one is local time.

118
00:07:38,010 --> 00:07:42,390
So what if we wanted to get the time of tomorrow so that tomorrow's date.

119
00:07:42,540 --> 00:07:45,710
So let's set a parameter and we'll make it dynamic.

120
00:07:45,990 --> 00:07:48,480
So set this one and we can adjust this.

121
00:07:48,480 --> 00:07:55,830
And then using CONSED, we're going to get a new date and equal that to new date object and we need

122
00:07:55,830 --> 00:07:56,970
to set the date.

123
00:07:57,000 --> 00:07:59,100
So we want to get tomorrow's date.

124
00:07:59,190 --> 00:08:06,540
So taking data using now so that this returns back milliseconds, we're going to add it and what we're

125
00:08:06,540 --> 00:08:11,040
adding is days, but we need to multiply it to get the right milliseconds.

126
00:08:11,370 --> 00:08:13,320
So there's 24 hours in a day.

127
00:08:13,500 --> 00:08:21,210
There's 60 minutes in an hour, 60 seconds in a minute, and 1000 milliseconds in every second.

128
00:08:21,240 --> 00:08:27,450
So now we can get the new date is going to contain tomorrow's data.

129
00:08:27,660 --> 00:08:30,660
So you can see it being output there that April 4th.

130
00:08:30,810 --> 00:08:32,040
And today is April 3rd.

131
00:08:32,160 --> 00:08:34,950
You can try this one and we can adjust this as needed.

132
00:08:35,100 --> 00:08:39,000
So if I set it to zero days, then it's going to return back today's day.

133
00:08:39,150 --> 00:08:42,570
If I do ten days, then it's going to go to ten days from now.

134
00:08:42,570 --> 00:08:46,450
And if I do 100 days, we're going to see it's going to do 100 days as well.

135
00:08:46,710 --> 00:08:52,470
So this is a more accurate way of setting the date instead of incrementing each day, because as we

136
00:08:52,470 --> 00:08:55,770
saw, whatever the increment, the days, sometimes things get thrown off.

137
00:08:55,920 --> 00:08:57,540
So you don't always have that.

138
00:08:57,540 --> 00:09:01,830
Each week is going to be seven because you might be at the end of the month or at the beginning of the

139
00:09:01,830 --> 00:09:02,130
month.

140
00:09:02,250 --> 00:09:03,540
So things might change.

141
00:09:03,690 --> 00:09:07,590
And there's an example within the guide for this, how to add a day.

142
00:09:08,040 --> 00:09:13,080
And then also what you can do is you can try to add a week as well using the same format.

143
00:09:13,290 --> 00:09:15,990
So there is a challenge for this lesson.

144
00:09:16,350 --> 00:09:23,850
And the challenge is to get the number of milliseconds since January 1st, 1970 to your birthday and

145
00:09:23,850 --> 00:09:26,150
then output that into the console.

146
00:09:26,640 --> 00:09:29,970
And I've got an example of the code so you can pause the video.

147
00:09:29,970 --> 00:09:34,770
And, of course, you're going to get different birthday than me unless you're born at the exact same

148
00:09:34,770 --> 00:09:37,610
time and then get the milliseconds into the console.

149
00:09:37,620 --> 00:09:38,780
So go ahead and try this out.

150
00:09:38,790 --> 00:09:40,500
And the code is just down here below.