Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,200 --> 00:00:03,840
When we built real world applications,
2
2
00:00:03,840 --> 00:00:06,880
one type of data that comes up all the time
3
3
00:00:06,880 --> 00:00:09,290
is dates and times.
4
4
00:00:09,290 --> 00:00:12,360
So let's learn the fundamentals of dates and times
5
5
00:00:12,360 --> 00:00:14,750
in this video so that in the next one,
6
6
00:00:14,750 --> 00:00:17,853
we can then implement them into our application.
7
7
00:00:19,500 --> 00:00:23,150
Now dates and time can be a little bit messy
8
8
00:00:23,150 --> 00:00:25,410
and confusing in JavaScript.
9
9
00:00:25,410 --> 00:00:27,760
And so just like with numbers,
10
10
00:00:27,760 --> 00:00:30,150
I will try to make the fundamentals here
11
11
00:00:30,150 --> 00:00:32,200
as clear as possible.
12
12
00:00:32,200 --> 00:00:35,463
So first we need to actually create a date.
13
13
00:00:36,460 --> 00:00:41,250
So create a date, and there are exactly four ways
14
14
00:00:41,250 --> 00:00:44,260
of creating dates in JavaScript.
15
15
00:00:44,260 --> 00:00:48,830
I mean, they all use the new date constructor function,
16
16
00:00:48,830 --> 00:00:51,810
but they can accept different parameters.
17
17
00:00:51,810 --> 00:00:53,920
So let's see how.
18
18
00:00:53,920 --> 00:00:55,890
So the first way is simply
19
19
00:00:55,890 --> 00:01:00,890
to use the new date constructor like this,
20
20
00:01:02,850 --> 00:01:06,270
and then we can assign this to a variable
21
21
00:01:06,270 --> 00:01:07,973
and let's just call it now.
22
22
00:01:09,560 --> 00:01:13,340
And then here, I'm logging now to the console.
23
23
00:01:14,810 --> 00:01:19,370
And so we get the current date and time at this very moment.
24
24
00:01:19,370 --> 00:01:22,980
So you see it that Sunday August 2, 2020.
25
25
00:01:22,980 --> 00:01:25,223
And plus this time here.
26
26
00:01:26,380 --> 00:01:29,770
Next up the second way is to parse the date
27
27
00:01:29,770 --> 00:01:31,083
from a date string.
28
28
00:01:32,070 --> 00:01:35,930
So again, we use new date
29
29
00:01:35,930 --> 00:01:38,050
and then we can pass in the string.
30
30
00:01:38,050 --> 00:01:42,290
And for example, this string here would work just fine.
31
31
00:01:42,290 --> 00:01:44,143
For example, just this part here.
32
32
00:01:47,920 --> 00:01:52,370
Okay, so simply giving JavaScript a string here
33
33
00:01:52,370 --> 00:01:57,240
and it will then automatically parse the time based on that.
34
34
00:01:57,240 --> 00:02:00,450
And so that's the second date that we get here,
35
35
00:02:00,450 --> 00:02:04,763
but we can also, of course, write a string ourselves.
36
36
00:02:06,130 --> 00:02:09,390
For example, let's try Christmas here.
37
37
00:02:09,390 --> 00:02:14,390
So we can even write December 24, 2015 or something.
38
38
00:02:18,200 --> 00:02:20,190
And so indeed that works
39
39
00:02:20,190 --> 00:02:22,500
and we even get the day of the week here.
40
40
00:02:22,500 --> 00:02:26,230
So JavaScript is pretty smart in parsing out the string
41
41
00:02:26,230 --> 00:02:28,170
that we write here.
42
42
00:02:28,170 --> 00:02:31,300
Now however, it's generally not a good idea
43
43
00:02:31,300 --> 00:02:36,300
to do this because it can be quite unreliable, now right?
44
44
00:02:36,740 --> 00:02:39,430
However, if the string was actually created
45
45
00:02:39,430 --> 00:02:43,790
by JavaScript itself, then of course it is pretty safe.
46
46
00:02:43,790 --> 00:02:48,790
So actually in our accounts object or in our account one
47
47
00:02:48,910 --> 00:02:53,910
for example, we now have these dates, so movement dates.
48
48
00:02:55,040 --> 00:02:58,083
And so let's try to parse this string here.
49
49
00:03:00,260 --> 00:03:03,770
So let's create a new date object in JavaScript
50
50
00:03:03,770 --> 00:03:05,860
based on that string.
51
51
00:03:05,860 --> 00:03:09,247
So that's in account1.movementdates and then zero.
52
52
00:03:16,240 --> 00:03:17,710
All right.
53
53
00:03:17,710 --> 00:03:20,810
So again, this is okay because it was JavaScript
54
54
00:03:21,830 --> 00:03:25,373
who created that date that I just showed you there.
55
55
00:03:26,540 --> 00:03:29,130
So this date here, and by the way,
56
56
00:03:29,130 --> 00:03:32,060
this Z here means the UTC.
57
57
00:03:32,060 --> 00:03:34,780
So that's the Coordinated Universal Time,
58
58
00:03:34,780 --> 00:03:39,260
which is basically the time without any time zone in London
59
59
00:03:39,260 --> 00:03:41,343
and also without daylight savings.
60
60
00:03:43,310 --> 00:03:48,250
So that's based on a string, but we can also pass in year,
61
61
00:03:48,250 --> 00:03:50,880
month, day, hour, minute,
62
62
00:03:50,880 --> 00:03:54,403
hence even second into this constructor.
63
63
00:03:57,670 --> 00:04:02,670
So let's say 2037 and 10, 19, 15,
64
64
00:04:05,810 --> 00:04:08,823
23 minutes and five seconds.
65
65
00:04:10,090 --> 00:04:15,090
So indeed we get November 19, 2037 at 15 hours, 23 minutes,
66
66
00:04:16,070 --> 00:04:19,190
five seconds just as we have here.
67
67
00:04:19,190 --> 00:04:22,580
Now, you might've noticed that here we have 10,
68
68
00:04:22,580 --> 00:04:26,830
but November is actually the month 11, right?
69
69
00:04:26,830 --> 00:04:29,690
And so that means that the month here
70
70
00:04:29,690 --> 00:04:32,150
in JavaScript is zero based.
71
71
00:04:32,150 --> 00:04:34,890
And that's a little bit weird, but well,
72
72
00:04:34,890 --> 00:04:38,170
we can just get used to that, right.
73
73
00:04:38,170 --> 00:04:39,820
Now, what's cool about this
74
74
00:04:39,820 --> 00:04:42,270
is that JavaScript actually autocorrects the day.
75
75
00:04:43,400 --> 00:04:45,573
So let's try this here again differently.
76
76
00:04:47,000 --> 00:04:50,650
So let's try November 31st,
77
77
00:04:50,650 --> 00:04:54,350
but we know that November only has 30 days, right?
78
78
00:04:54,350 --> 00:04:56,550
And so if we take a look at this,
79
79
00:04:56,550 --> 00:04:59,880
it will then autocorrect right to the next day.
80
80
00:04:59,880 --> 00:05:02,170
So that's going to be December 1st
81
81
00:05:02,170 --> 00:05:05,460
and we can even try November 33rd,
82
82
00:05:05,460 --> 00:05:10,460
which should then be a December 3rd, okay.
83
83
00:05:10,530 --> 00:05:14,020
So this sometimes is actually pretty useful.
84
84
00:05:14,020 --> 00:05:16,530
Finally, we can also
85
85
00:05:16,530 --> 00:05:19,120
pass into the date constructor function,
86
86
00:05:19,120 --> 00:05:22,960
the amount of milliseconds passed since the beginning
87
87
00:05:22,960 --> 00:05:27,960
of the Unix time, which is January 1, 1970,
88
88
00:05:28,130 --> 00:05:30,170
so lets see that.
89
89
00:05:30,170 --> 00:05:35,170
So again, new date and if we pass in zero,
90
90
00:05:35,410 --> 00:05:39,920
so zero milliseconds after that initial Unix time,
91
91
00:05:39,920 --> 00:05:43,720
then indeed we get January 1st, 1970.
92
92
00:05:43,720 --> 00:05:46,360
Okay, and this will actually be pretty useful,
93
93
00:05:46,360 --> 00:05:49,290
even though it looks a bit strange.
94
94
00:05:49,290 --> 00:05:52,983
And let's now create a date that is three days after this.
95
95
00:05:53,870 --> 00:05:58,870
And so that is essentially three times, which is three days.
96
96
00:05:59,850 --> 00:06:03,040
And one day is made out of 24 hours,
97
97
00:06:03,040 --> 00:06:05,210
which is made out of 60 minutes,
98
98
00:06:05,210 --> 00:06:07,570
which is made out of 60 minutes,
99
99
00:06:07,570 --> 00:06:10,883
which is made out of 1000 milliseconds.
100
100
00:06:11,880 --> 00:06:15,350
And so this is how we convert from days to milliseconds.
101
101
00:06:15,350 --> 00:06:18,330
So three days times 24 hours,
102
102
00:06:18,330 --> 00:06:22,120
which is the number of hours in one day, times 60,
103
103
00:06:22,120 --> 00:06:26,880
which is the number of minutes in one hour, then times 60,
104
104
00:06:26,880 --> 00:06:29,260
which is the number of seconds in one minute,
105
105
00:06:29,260 --> 00:06:33,700
and then times 1000 to convert two milliseconds.
106
106
00:06:33,700 --> 00:06:36,640
And so now we get January 4th,
107
107
00:06:36,640 --> 00:06:39,670
so that's exactly three days later.
108
108
00:06:39,670 --> 00:06:43,730
Okay, and this number that we calculated here,
109
109
00:06:43,730 --> 00:06:46,040
that's actually calculated also here.
110
110
00:06:46,040 --> 00:06:48,000
So this is the timestamp.
111
111
00:06:48,000 --> 00:06:49,970
So we call this year a timestamp
112
112
00:06:49,970 --> 00:06:53,040
of the day number three, essentially.
113
113
00:06:53,040 --> 00:06:56,173
And we will see why does this useful a little bit later.
114
114
00:06:57,110 --> 00:07:00,950
Now these dates that we just created here are in fact,
115
115
00:07:00,950 --> 00:07:03,780
just another special type of object.
116
116
00:07:03,780 --> 00:07:06,440
And so therefore they have their own methods,
117
117
00:07:06,440 --> 00:07:09,780
just like a race or maps or strengths.
118
118
00:07:09,780 --> 00:07:12,650
And so we can use these methods to get,
119
119
00:07:12,650 --> 00:07:16,093
or to set components of a date, all right.
120
120
00:07:18,390 --> 00:07:22,600
So working with dates here
121
121
00:07:22,600 --> 00:07:26,400
and let's now actually create a date again,
122
122
00:07:26,400 --> 00:07:29,403
and this time we're gonna store it in a variable,
123
123
00:07:30,420 --> 00:07:31,523
let's call it future.
124
124
00:07:34,120 --> 00:07:38,573
So new date and let's actually use the same as this one.
125
125
00:07:40,240 --> 00:07:44,403
Okay, just without the seconds, that's not really necessary.
126
126
00:07:47,390 --> 00:07:50,193
Okay, let's just log into console here to make sure.
127
127
00:07:51,500 --> 00:07:54,820
Okay, and let's for now at least
128
128
00:07:54,820 --> 00:07:58,170
just comment out these here.
129
129
00:07:58,170 --> 00:08:00,170
So we already know how it works.
130
130
00:08:00,170 --> 00:08:01,990
Now, we just want to work a little bit
131
131
00:08:01,990 --> 00:08:03,740
with this particular date
132
132
00:08:05,870 --> 00:08:09,260
so we can use future,
133
133
00:08:09,260 --> 00:08:12,090
which remember is simply this object here
134
134
00:08:13,050 --> 00:08:17,083
and then the method get full year.
135
135
00:08:18,530 --> 00:08:21,910
And so indeed we get 2037.
136
136
00:08:21,910 --> 00:08:25,650
There's also get year, but never use that.
137
137
00:08:25,650 --> 00:08:28,250
Okay, always use get full year.
138
138
00:08:28,250 --> 00:08:31,460
Don't make the mistake of using that other one.
139
139
00:08:31,460 --> 00:08:33,483
Next up, we have get month.
140
140
00:08:36,620 --> 00:08:40,010
And remember that this one is zero based.
141
141
00:08:40,010 --> 00:08:43,463
So 10 is actually the month number 11,
142
142
00:08:44,490 --> 00:08:46,643
then we have get date.
143
143
00:08:47,700 --> 00:08:49,930
And this is actually the day.
144
144
00:08:49,930 --> 00:08:53,650
So I think that this method has a little bit of a weird name
145
145
00:08:54,780 --> 00:08:57,620
and that's because get day
146
146
00:08:57,620 --> 00:08:59,950
is actually not the day of the month,
147
147
00:08:59,950 --> 00:09:02,760
but the day of the week, okay.
148
148
00:09:02,760 --> 00:09:07,520
And zero here is Sunday and so four is Thursday.
149
149
00:09:07,520 --> 00:09:09,443
So we saw already that it's Thursday.
150
150
00:09:10,340 --> 00:09:14,210
And so that's equivalent to number four.
151
151
00:09:14,210 --> 00:09:18,320
And then besides these, we also have three more,
152
152
00:09:18,320 --> 00:09:23,320
which is get hour or hours, minutes and seconds.
153
153
00:09:29,820 --> 00:09:34,820
So sometimes these can be pretty useful to work with a date.
154
154
00:09:35,260 --> 00:09:39,113
Besides that we can also get a nicely formatted string.
155
155
00:09:40,090 --> 00:09:44,787
So basically similar to what we have up here to ISO string.
156
156
00:09:47,420 --> 00:09:48,430
All right.
157
157
00:09:48,430 --> 00:09:50,630
So this is the ISO string,
158
158
00:09:50,630 --> 00:09:53,710
which follows some kind of international standard.
159
159
00:09:53,710 --> 00:09:56,640
And maybe you notice that this is actually similar
160
160
00:09:56,640 --> 00:10:00,633
to the string that we used before coming from account one.
161
161
00:10:01,990 --> 00:10:06,310
So that's movement dates, right?
162
162
00:10:06,310 --> 00:10:09,750
So these were generated by exactly this method.
163
163
00:10:09,750 --> 00:10:13,460
And so that's one of the very useful cases is when you want
164
164
00:10:13,460 --> 00:10:17,490
to convert a particular date object into a string
165
165
00:10:17,490 --> 00:10:19,190
that you can then store somewhere.
166
166
00:10:20,660 --> 00:10:24,853
Finally, we can also get the timestamp for the date.
167
167
00:10:27,400 --> 00:10:30,330
And remember that the timestamp is the milliseconds,
168
168
00:10:30,330 --> 00:10:35,330
which have passed since January 1, 1970, so get time.
169
169
00:10:37,940 --> 00:10:42,240
And so we see that this huge amount has passed
170
170
00:10:42,240 --> 00:10:43,950
well, since that date.
171
171
00:10:43,950 --> 00:10:48,380
And now we can take this number and reverse this.
172
172
00:10:48,380 --> 00:10:50,970
So if we wanted we could now create a new date
173
173
00:10:50,970 --> 00:10:54,363
only based on these milliseconds.
174
174
00:10:55,440 --> 00:10:58,823
And it will then give us exactly that same time.
175
175
00:11:00,350 --> 00:11:04,010
So you'll see it's the same as this one, right?
176
176
00:11:04,010 --> 00:11:07,170
And so simply based on the milliseconds that have passed
177
177
00:11:07,170 --> 00:11:10,510
since January 1, 1970.
178
178
00:11:10,510 --> 00:11:13,090
And timestamps are actually so important
179
179
00:11:13,090 --> 00:11:16,310
that there is a special method that we can use
180
180
00:11:16,310 --> 00:11:19,023
to get the timestamp for right now.
181
181
00:11:20,430 --> 00:11:23,330
So if you want simply the current timestamp
182
182
00:11:23,330 --> 00:11:26,210
for this exact moment, then you don't even need
183
183
00:11:26,210 --> 00:11:27,780
to create a new date.
184
184
00:11:27,780 --> 00:11:31,493
All we have to do is to call date.now,
185
185
00:11:32,460 --> 00:11:35,420
and that then gives us this timestamp.
186
186
00:11:35,420 --> 00:11:36,253
Now, okay.
187
187
00:11:37,660 --> 00:11:40,740
Finally, there are also the set versions
188
188
00:11:40,740 --> 00:11:43,000
of all of these methods.
189
189
00:11:43,000 --> 00:11:45,780
So let me just show you the one for the year.
190
190
00:11:45,780 --> 00:11:48,243
So I'm not gonna go through all of them here.
191
191
00:11:49,340 --> 00:11:53,817
And so future.setfullyear, and this again is a method.
192
192
00:11:56,600 --> 00:11:58,563
So let's set it to 2040,
193
193
00:11:59,704 --> 00:12:03,023
and then we can take a look at our date.
194
194
00:12:03,870 --> 00:12:08,660
And so now it is November 19, 2040.
195
195
00:12:08,660 --> 00:12:11,790
And of course, then the day of the month here has changed.
196
196
00:12:11,790 --> 00:12:16,790
And so yeah, there also exists set month, set date,
197
197
00:12:18,080 --> 00:12:20,730
set day and so on and so forth.
198
198
00:12:20,730 --> 00:12:24,450
And these also perform autocorrection just like here,
199
199
00:12:24,450 --> 00:12:27,743
when we create a new date, okay.
200
200
00:12:28,820 --> 00:12:31,430
So that's basically all the methods that you need
201
201
00:12:31,430 --> 00:12:35,350
to know about dates and these last here
202
202
00:12:35,350 --> 00:12:39,130
are all quite intuitive and all you need to know really
203
203
00:12:39,130 --> 00:12:42,100
is that there are all these different ways
204
204
00:12:42,100 --> 00:12:43,860
of creating dates.
205
205
00:12:43,860 --> 00:12:44,880
Now in the next video,
206
206
00:12:44,880 --> 00:12:47,440
we will then sum up what we just learned here
207
207
00:12:47,440 --> 00:12:50,470
to add dates to the bankers application
208
208
00:12:50,470 --> 00:12:52,823
and make our project even better.
18308
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.