WEBVTT 1 00:00:01.200 --> 00:00:03.840 When we built real world applications, 2 00:00:03.840 --> 00:00:06.880 one type of data that comes up all the time 3 00:00:06.880 --> 00:00:09.290 is dates and times. 4 00:00:09.290 --> 00:00:12.360 So let's learn the fundamentals of dates and times 5 00:00:12.360 --> 00:00:14.750 in this video so that in the next one, 6 00:00:14.750 --> 00:00:17.853 we can then implement them into our application. 7 00:00:19.500 --> 00:00:23.150 Now dates and time can be a little bit messy 8 00:00:23.150 --> 00:00:25.410 and confusing in JavaScript. 9 00:00:25.410 --> 00:00:27.760 And so just like with numbers, 10 00:00:27.760 --> 00:00:30.150 I will try to make the fundamentals here 11 00:00:30.150 --> 00:00:32.200 as clear as possible. 12 00:00:32.200 --> 00:00:35.463 So first we need to actually create a date. 13 00:00:36.460 --> 00:00:41.250 So create a date, and there are exactly four ways 14 00:00:41.250 --> 00:00:44.260 of creating dates in JavaScript. 15 00:00:44.260 --> 00:00:48.830 I mean, they all use the new date constructor function, 16 00:00:48.830 --> 00:00:51.810 but they can accept different parameters. 17 00:00:51.810 --> 00:00:53.920 So let's see how. 18 00:00:53.920 --> 00:00:55.890 So the first way is simply 19 00:00:55.890 --> 00:01:00.890 to use the new date constructor like this, 20 00:01:02.850 --> 00:01:06.270 and then we can assign this to a variable 21 00:01:06.270 --> 00:01:07.973 and let's just call it now. 22 00:01:09.560 --> 00:01:13.340 And then here, I'm logging now to the console. 23 00:01:14.810 --> 00:01:19.370 And so we get the current date and time at this very moment. 24 00:01:19.370 --> 00:01:22.980 So you see it that Sunday August 2, 2020. 25 00:01:22.980 --> 00:01:25.223 And plus this time here. 26 00:01:26.380 --> 00:01:29.770 Next up the second way is to parse the date 27 00:01:29.770 --> 00:01:31.083 from a date string. 28 00:01:32.070 --> 00:01:35.930 So again, we use new date 29 00:01:35.930 --> 00:01:38.050 and then we can pass in the string. 30 00:01:38.050 --> 00:01:42.290 And for example, this string here would work just fine. 31 00:01:42.290 --> 00:01:44.143 For example, just this part here. 32 00:01:47.920 --> 00:01:52.370 Okay, so simply giving JavaScript a string here 33 00:01:52.370 --> 00:01:57.240 and it will then automatically parse the time based on that. 34 00:01:57.240 --> 00:02:00.450 And so that's the second date that we get here, 35 00:02:00.450 --> 00:02:04.763 but we can also, of course, write a string ourselves. 36 00:02:06.130 --> 00:02:09.390 For example, let's try Christmas here. 37 00:02:09.390 --> 00:02:14.390 So we can even write December 24, 2015 or something. 38 00:02:18.200 --> 00:02:20.190 And so indeed that works 39 00:02:20.190 --> 00:02:22.500 and we even get the day of the week here. 40 00:02:22.500 --> 00:02:26.230 So JavaScript is pretty smart in parsing out the string 41 00:02:26.230 --> 00:02:28.170 that we write here. 42 00:02:28.170 --> 00:02:31.300 Now however, it's generally not a good idea 43 00:02:31.300 --> 00:02:36.300 to do this because it can be quite unreliable, now right? 44 00:02:36.740 --> 00:02:39.430 However, if the string was actually created 45 00:02:39.430 --> 00:02:43.790 by JavaScript itself, then of course it is pretty safe. 46 00:02:43.790 --> 00:02:48.790 So actually in our accounts object or in our account one 47 00:02:48.910 --> 00:02:53.910 for example, we now have these dates, so movement dates. 48 00:02:55.040 --> 00:02:58.083 And so let's try to parse this string here. 49 00:03:00.260 --> 00:03:03.770 So let's create a new date object in JavaScript 50 00:03:03.770 --> 00:03:05.860 based on that string. 51 00:03:05.860 --> 00:03:09.247 So that's in account1.movementdates and then zero. 52 00:03:16.240 --> 00:03:17.710 All right. 53 00:03:17.710 --> 00:03:20.810 So again, this is okay because it was JavaScript 54 00:03:21.830 --> 00:03:25.373 who created that date that I just showed you there. 55 00:03:26.540 --> 00:03:29.130 So this date here, and by the way, 56 00:03:29.130 --> 00:03:32.060 this Z here means the UTC. 57 00:03:32.060 --> 00:03:34.780 So that's the Coordinated Universal Time, 58 00:03:34.780 --> 00:03:39.260 which is basically the time without any time zone in London 59 00:03:39.260 --> 00:03:41.343 and also without daylight savings. 60 00:03:43.310 --> 00:03:48.250 So that's based on a string, but we can also pass in year, 61 00:03:48.250 --> 00:03:50.880 month, day, hour, minute, 62 00:03:50.880 --> 00:03:54.403 hence even second into this constructor. 63 00:03:57.670 --> 00:04:02.670 So let's say 2037 and 10, 19, 15, 64 00:04:05.810 --> 00:04:08.823 23 minutes and five seconds. 65 00:04:10.090 --> 00:04:15.090 So indeed we get November 19, 2037 at 15 hours, 23 minutes, 66 00:04:16.070 --> 00:04:19.190 five seconds just as we have here. 67 00:04:19.190 --> 00:04:22.580 Now, you might've noticed that here we have 10, 68 00:04:22.580 --> 00:04:26.830 but November is actually the month 11, right? 69 00:04:26.830 --> 00:04:29.690 And so that means that the month here 70 00:04:29.690 --> 00:04:32.150 in JavaScript is zero based. 71 00:04:32.150 --> 00:04:34.890 And that's a little bit weird, but well, 72 00:04:34.890 --> 00:04:38.170 we can just get used to that, right. 73 00:04:38.170 --> 00:04:39.820 Now, what's cool about this 74 00:04:39.820 --> 00:04:42.270 is that JavaScript actually autocorrects the day. 75 00:04:43.400 --> 00:04:45.573 So let's try this here again differently. 76 00:04:47.000 --> 00:04:50.650 So let's try November 31st, 77 00:04:50.650 --> 00:04:54.350 but we know that November only has 30 days, right? 78 00:04:54.350 --> 00:04:56.550 And so if we take a look at this, 79 00:04:56.550 --> 00:04:59.880 it will then autocorrect right to the next day. 80 00:04:59.880 --> 00:05:02.170 So that's going to be December 1st 81 00:05:02.170 --> 00:05:05.460 and we can even try November 33rd, 82 00:05:05.460 --> 00:05:10.460 which should then be a December 3rd, okay. 83 00:05:10.530 --> 00:05:14.020 So this sometimes is actually pretty useful. 84 00:05:14.020 --> 00:05:16.530 Finally, we can also 85 00:05:16.530 --> 00:05:19.120 pass into the date constructor function, 86 00:05:19.120 --> 00:05:22.960 the amount of milliseconds passed since the beginning 87 00:05:22.960 --> 00:05:27.960 of the Unix time, which is January 1, 1970, 88 00:05:28.130 --> 00:05:30.170 so lets see that. 89 00:05:30.170 --> 00:05:35.170 So again, new date and if we pass in zero, 90 00:05:35.410 --> 00:05:39.920 so zero milliseconds after that initial Unix time, 91 00:05:39.920 --> 00:05:43.720 then indeed we get January 1st, 1970. 92 00:05:43.720 --> 00:05:46.360 Okay, and this will actually be pretty useful, 93 00:05:46.360 --> 00:05:49.290 even though it looks a bit strange. 94 00:05:49.290 --> 00:05:52.983 And let's now create a date that is three days after this. 95 00:05:53.870 --> 00:05:58.870 And so that is essentially three times, which is three days. 96 00:05:59.850 --> 00:06:03.040 And one day is made out of 24 hours, 97 00:06:03.040 --> 00:06:05.210 which is made out of 60 minutes, 98 00:06:05.210 --> 00:06:07.570 which is made out of 60 minutes, 99 00:06:07.570 --> 00:06:10.883 which is made out of 1000 milliseconds. 100 00:06:11.880 --> 00:06:15.350 And so this is how we convert from days to milliseconds. 101 00:06:15.350 --> 00:06:18.330 So three days times 24 hours, 102 00:06:18.330 --> 00:06:22.120 which is the number of hours in one day, times 60, 103 00:06:22.120 --> 00:06:26.880 which is the number of minutes in one hour, then times 60, 104 00:06:26.880 --> 00:06:29.260 which is the number of seconds in one minute, 105 00:06:29.260 --> 00:06:33.700 and then times 1000 to convert two milliseconds. 106 00:06:33.700 --> 00:06:36.640 And so now we get January 4th, 107 00:06:36.640 --> 00:06:39.670 so that's exactly three days later. 108 00:06:39.670 --> 00:06:43.730 Okay, and this number that we calculated here, 109 00:06:43.730 --> 00:06:46.040 that's actually calculated also here. 110 00:06:46.040 --> 00:06:48.000 So this is the timestamp. 111 00:06:48.000 --> 00:06:49.970 So we call this year a timestamp 112 00:06:49.970 --> 00:06:53.040 of the day number three, essentially. 113 00:06:53.040 --> 00:06:56.173 And we will see why does this useful a little bit later. 114 00:06:57.110 --> 00:07:00.950 Now these dates that we just created here are in fact, 115 00:07:00.950 --> 00:07:03.780 just another special type of object. 116 00:07:03.780 --> 00:07:06.440 And so therefore they have their own methods, 117 00:07:06.440 --> 00:07:09.780 just like a race or maps or strengths. 118 00:07:09.780 --> 00:07:12.650 And so we can use these methods to get, 119 00:07:12.650 --> 00:07:16.093 or to set components of a date, all right. 120 00:07:18.390 --> 00:07:22.600 So working with dates here 121 00:07:22.600 --> 00:07:26.400 and let's now actually create a date again, 122 00:07:26.400 --> 00:07:29.403 and this time we're gonna store it in a variable, 123 00:07:30.420 --> 00:07:31.523 let's call it future. 124 00:07:34.120 --> 00:07:38.573 So new date and let's actually use the same as this one. 125 00:07:40.240 --> 00:07:44.403 Okay, just without the seconds, that's not really necessary. 126 00:07:47.390 --> 00:07:50.193 Okay, let's just log into console here to make sure. 127 00:07:51.500 --> 00:07:54.820 Okay, and let's for now at least 128 00:07:54.820 --> 00:07:58.170 just comment out these here. 129 00:07:58.170 --> 00:08:00.170 So we already know how it works. 130 00:08:00.170 --> 00:08:01.990 Now, we just want to work a little bit 131 00:08:01.990 --> 00:08:03.740 with this particular date 132 00:08:05.870 --> 00:08:09.260 so we can use future, 133 00:08:09.260 --> 00:08:12.090 which remember is simply this object here 134 00:08:13.050 --> 00:08:17.083 and then the method get full year. 135 00:08:18.530 --> 00:08:21.910 And so indeed we get 2037. 136 00:08:21.910 --> 00:08:25.650 There's also get year, but never use that. 137 00:08:25.650 --> 00:08:28.250 Okay, always use get full year. 138 00:08:28.250 --> 00:08:31.460 Don't make the mistake of using that other one. 139 00:08:31.460 --> 00:08:33.483 Next up, we have get month. 140 00:08:36.620 --> 00:08:40.010 And remember that this one is zero based. 141 00:08:40.010 --> 00:08:43.463 So 10 is actually the month number 11, 142 00:08:44.490 --> 00:08:46.643 then we have get date. 143 00:08:47.700 --> 00:08:49.930 And this is actually the day. 144 00:08:49.930 --> 00:08:53.650 So I think that this method has a little bit of a weird name 145 00:08:54.780 --> 00:08:57.620 and that's because get day 146 00:08:57.620 --> 00:08:59.950 is actually not the day of the month, 147 00:08:59.950 --> 00:09:02.760 but the day of the week, okay. 148 00:09:02.760 --> 00:09:07.520 And zero here is Sunday and so four is Thursday. 149 00:09:07.520 --> 00:09:09.443 So we saw already that it's Thursday. 150 00:09:10.340 --> 00:09:14.210 And so that's equivalent to number four. 151 00:09:14.210 --> 00:09:18.320 And then besides these, we also have three more, 152 00:09:18.320 --> 00:09:23.320 which is get hour or hours, minutes and seconds. 153 00:09:29.820 --> 00:09:34.820 So sometimes these can be pretty useful to work with a date. 154 00:09:35.260 --> 00:09:39.113 Besides that we can also get a nicely formatted string. 155 00:09:40.090 --> 00:09:44.787 So basically similar to what we have up here to ISO string. 156 00:09:47.420 --> 00:09:48.430 All right. 157 00:09:48.430 --> 00:09:50.630 So this is the ISO string, 158 00:09:50.630 --> 00:09:53.710 which follows some kind of international standard. 159 00:09:53.710 --> 00:09:56.640 And maybe you notice that this is actually similar 160 00:09:56.640 --> 00:10:00.633 to the string that we used before coming from account one. 161 00:10:01.990 --> 00:10:06.310 So that's movement dates, right? 162 00:10:06.310 --> 00:10:09.750 So these were generated by exactly this method. 163 00:10:09.750 --> 00:10:13.460 And so that's one of the very useful cases is when you want 164 00:10:13.460 --> 00:10:17.490 to convert a particular date object into a string 165 00:10:17.490 --> 00:10:19.190 that you can then store somewhere. 166 00:10:20.660 --> 00:10:24.853 Finally, we can also get the timestamp for the date. 167 00:10:27.400 --> 00:10:30.330 And remember that the timestamp is the milliseconds, 168 00:10:30.330 --> 00:10:35.330 which have passed since January 1, 1970, so get time. 169 00:10:37.940 --> 00:10:42.240 And so we see that this huge amount has passed 170 00:10:42.240 --> 00:10:43.950 well, since that date. 171 00:10:43.950 --> 00:10:48.380 And now we can take this number and reverse this. 172 00:10:48.380 --> 00:10:50.970 So if we wanted we could now create a new date 173 00:10:50.970 --> 00:10:54.363 only based on these milliseconds. 174 00:10:55.440 --> 00:10:58.823 And it will then give us exactly that same time. 175 00:11:00.350 --> 00:11:04.010 So you'll see it's the same as this one, right? 176 00:11:04.010 --> 00:11:07.170 And so simply based on the milliseconds that have passed 177 00:11:07.170 --> 00:11:10.510 since January 1, 1970. 178 00:11:10.510 --> 00:11:13.090 And timestamps are actually so important 179 00:11:13.090 --> 00:11:16.310 that there is a special method that we can use 180 00:11:16.310 --> 00:11:19.023 to get the timestamp for right now. 181 00:11:20.430 --> 00:11:23.330 So if you want simply the current timestamp 182 00:11:23.330 --> 00:11:26.210 for this exact moment, then you don't even need 183 00:11:26.210 --> 00:11:27.780 to create a new date. 184 00:11:27.780 --> 00:11:31.493 All we have to do is to call date.now, 185 00:11:32.460 --> 00:11:35.420 and that then gives us this timestamp. 186 00:11:35.420 --> 00:11:36.253 Now, okay. 187 00:11:37.660 --> 00:11:40.740 Finally, there are also the set versions 188 00:11:40.740 --> 00:11:43.000 of all of these methods. 189 00:11:43.000 --> 00:11:45.780 So let me just show you the one for the year. 190 00:11:45.780 --> 00:11:48.243 So I'm not gonna go through all of them here. 191 00:11:49.340 --> 00:11:53.817 And so future.setfullyear, and this again is a method. 192 00:11:56.600 --> 00:11:58.563 So let's set it to 2040, 193 00:11:59.704 --> 00:12:03.023 and then we can take a look at our date. 194 00:12:03.870 --> 00:12:08.660 And so now it is November 19, 2040. 195 00:12:08.660 --> 00:12:11.790 And of course, then the day of the month here has changed. 196 00:12:11.790 --> 00:12:16.790 And so yeah, there also exists set month, set date, 197 00:12:18.080 --> 00:12:20.730 set day and so on and so forth. 198 00:12:20.730 --> 00:12:24.450 And these also perform autocorrection just like here, 199 00:12:24.450 --> 00:12:27.743 when we create a new date, okay. 200 00:12:28.820 --> 00:12:31.430 So that's basically all the methods that you need 201 00:12:31.430 --> 00:12:35.350 to know about dates and these last here 202 00:12:35.350 --> 00:12:39.130 are all quite intuitive and all you need to know really 203 00:12:39.130 --> 00:12:42.100 is that there are all these different ways 204 00:12:42.100 --> 00:12:43.860 of creating dates. 205 00:12:43.860 --> 00:12:44.880 Now in the next video, 206 00:12:44.880 --> 00:12:47.440 we will then sum up what we just learned here 207 00:12:47.440 --> 00:12:50.470 to add dates to the bankers application 208 00:12:50.470 --> 00:12:52.823 and make our project even better.