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.