Original subtitles

1 1

When we built real world applications, 2

2

one type of data that comes up all the time 3

3

is dates and times. 4

4

So let's learn the fundamentals of dates and times 5

5

in this video so that in the next one, 6

6

we can then implement them into our application. 7

7

Now dates and time can be a little bit messy 8

8

and confusing in JavaScript. 9

9

And so just like with numbers, 10

10

I will try to make the fundamentals here 11

11

as clear as possible. 12

12

So first we need to actually create a date. 13

13

So create a date, and there are exactly four ways 14

14

of creating dates in JavaScript. 15

15

I mean, they all use the new date constructor function, 16

16

but they can accept different parameters. 17

17

So let's see how. 18

18

So the first way is simply 19

19

to use the new date constructor like this, 20

20

and then we can assign this to a variable 21

21

and let's just call it now. 22

22

And then here, I'm logging now to the console. 23

23

And so we get the current date and time at this very moment. 24

24

So you see it that Sunday August 2, 2020. 25

25

And plus this time here. 26

26

Next up the second way is to parse the date 27

27

from a date string. 28

28

So again, we use new date 29

29

and then we can pass in the string. 30

30

And for example, this string here would work just fine. 31

31

For example, just this part here. 32

32

Okay, so simply giving JavaScript a string here 33

33

and it will then automatically parse the time based on that. 34

34

And so that's the second date that we get here, 35

35

but we can also, of course, write a string ourselves. 36

36

For example, let's try Christmas here. 37

37

So we can even write December 24, 2015 or something. 38

38

And so indeed that works 39

39

and we even get the day of the week here. 40

40

So JavaScript is pretty smart in parsing out the string 41

41

that we write here. 42

42

Now however, it's generally not a good idea 43

43

to do this because it can be quite unreliable, now right? 44

44

However, if the string was actually created 45

45

by JavaScript itself, then of course it is pretty safe. 46

46

So actually in our accounts object or in our account one 47

47

for example, we now have these dates, so movement dates. 48

48

And so let's try to parse this string here. 49

49

So let's create a new date object in JavaScript 50

50

based on that string. 51

51

So that's in account1.movementdates and then zero. 52

52

All right. 53

53

So again, this is okay because it was JavaScript 54

54

who created that date that I just showed you there. 55

55

So this date here, and by the way, 56

56

this Z here means the UTC. 57

57

So that's the Coordinated Universal Time, 58

58

which is basically the time without any time zone in London 59

59

and also without daylight savings. 60

60

So that's based on a string, but we can also pass in year, 61

61

month, day, hour, minute, 62

62

hence even second into this constructor. 63

63

So let's say 2037 and 10, 19, 15, 64

64

23 minutes and five seconds. 65

65

So indeed we get November 19, 2037 at 15 hours, 23 minutes, 66

66

five seconds just as we have here. 67

67

Now, you might've noticed that here we have 10, 68

68

but November is actually the month 11, right? 69

69

And so that means that the month here 70

70

in JavaScript is zero based. 71

71

And that's a little bit weird, but well, 72

72

we can just get used to that, right. 73

73

Now, what's cool about this 74

74

is that JavaScript actually autocorrects the day. 75

75

So let's try this here again differently. 76

76

So let's try November 31st, 77

77

but we know that November only has 30 days, right? 78

78

And so if we take a look at this, 79

79

it will then autocorrect right to the next day. 80

80

So that's going to be December 1st 81

81

and we can even try November 33rd, 82

82

which should then be a December 3rd, okay. 83

83

So this sometimes is actually pretty useful. 84

84

Finally, we can also 85

85

pass into the date constructor function, 86

86

the amount of milliseconds passed since the beginning 87

87

of the Unix time, which is January 1, 1970, 88

88

so lets see that. 89

89

So again, new date and if we pass in zero, 90

90

so zero milliseconds after that initial Unix time, 91

91

then indeed we get January 1st, 1970. 92

92

Okay, and this will actually be pretty useful, 93

93

even though it looks a bit strange. 94

94

And let's now create a date that is three days after this. 95

95

And so that is essentially three times, which is three days. 96

96

And one day is made out of 24 hours, 97

97

which is made out of 60 minutes, 98

98

which is made out of 60 minutes, 99

99

which is made out of 1000 milliseconds. 100

100

And so this is how we convert from days to milliseconds. 101

101

So three days times 24 hours, 102

102

which is the number of hours in one day, times 60, 103

103

which is the number of minutes in one hour, then times 60, 104

104

which is the number of seconds in one minute, 105

105

and then times 1000 to convert two milliseconds. 106

106

And so now we get January 4th, 107

107

so that's exactly three days later. 108

108

Okay, and this number that we calculated here, 109

109

that's actually calculated also here. 110

110

So this is the timestamp. 111

111

So we call this year a timestamp 112

112

of the day number three, essentially. 113

113

And we will see why does this useful a little bit later. 114

114

Now these dates that we just created here are in fact, 115

115

just another special type of object. 116

116

And so therefore they have their own methods, 117

117

just like a race or maps or strengths. 118

118

And so we can use these methods to get, 119

119

or to set components of a date, all right. 120

120

So working with dates here 121

121

and let's now actually create a date again, 122

122

and this time we're gonna store it in a variable, 123

123

let's call it future. 124

124

So new date and let's actually use the same as this one. 125

125

Okay, just without the seconds, that's not really necessary. 126

126

Okay, let's just log into console here to make sure. 127

127

Okay, and let's for now at least 128

128

just comment out these here. 129

129

So we already know how it works. 130

130

Now, we just want to work a little bit 131

131

with this particular date 132

132

so we can use future, 133

133

which remember is simply this object here 134

134

and then the method get full year. 135

135

And so indeed we get 2037. 136

136

There's also get year, but never use that. 137

137

Okay, always use get full year. 138

138

Don't make the mistake of using that other one. 139

139

Next up, we have get month. 140

140

And remember that this one is zero based. 141

141

So 10 is actually the month number 11, 142

142

then we have get date. 143

143

And this is actually the day. 144

144

So I think that this method has a little bit of a weird name 145

145

and that's because get day 146

146

is actually not the day of the month, 147

147

but the day of the week, okay. 148

148

And zero here is Sunday and so four is Thursday. 149

149

So we saw already that it's Thursday. 150

150

And so that's equivalent to number four. 151

151

And then besides these, we also have three more, 152

152

which is get hour or hours, minutes and seconds. 153

153

So sometimes these can be pretty useful to work with a date. 154

154

Besides that we can also get a nicely formatted string. 155

155

So basically similar to what we have up here to ISO string. 156

156

All right. 157

157

So this is the ISO string, 158

158

which follows some kind of international standard. 159

159

And maybe you notice that this is actually similar 160

160

to the string that we used before coming from account one. 161

161

So that's movement dates, right? 162

162

So these were generated by exactly this method. 163

163

And so that's one of the very useful cases is when you want 164

164

to convert a particular date object into a string 165

165

that you can then store somewhere. 166

166

Finally, we can also get the timestamp for the date. 167

167

And remember that the timestamp is the milliseconds, 168

168

which have passed since January 1, 1970, so get time. 169

169

And so we see that this huge amount has passed 170

170

well, since that date. 171

171

And now we can take this number and reverse this. 172

172

So if we wanted we could now create a new date 173

173

only based on these milliseconds. 174

174

And it will then give us exactly that same time. 175

175

So you'll see it's the same as this one, right? 176

176

And so simply based on the milliseconds that have passed 177

177

since January 1, 1970. 178

178

And timestamps are actually so important 179

179

that there is a special method that we can use 180

180

to get the timestamp for right now. 181

181

So if you want simply the current timestamp 182

182

for this exact moment, then you don't even need 183

183

to create a new date. 184

184

All we have to do is to call date.now, 185

185

and that then gives us this timestamp. 186

186

Now, okay. 187

187

Finally, there are also the set versions 188

188

of all of these methods. 189

189

So let me just show you the one for the year. 190

190

So I'm not gonna go through all of them here. 191

191

And so future.setfullyear, and this again is a method. 192

192

So let's set it to 2040, 193

193

and then we can take a look at our date. 194

194

And so now it is November 19, 2040. 195

195

And of course, then the day of the month here has changed. 196

196

And so yeah, there also exists set month, set date, 197

197

set day and so on and so forth. 198

198

And these also perform autocorrection just like here, 199

199

when we create a new date, okay. 200

200

So that's basically all the methods that you need 201

201

to know about dates and these last here 202

202

are all quite intuitive and all you need to know really 203

203

is that there are all these different ways 204

204

of creating dates. 205

205

Now in the next video, 206

206

we will then sum up what we just learned here 207

207

to add dates to the bankers application 208

208

and make our project even better.