Original subtitles

1 1

So JavaScript 2

2

has a new Internationalization API. 3

3

Now that sounds very fancy, 4

4

but all it does is to allow us 5

5

to easily format numbers and strings 6

6

according to different languages. 7

7

So with this new API, 8

8

we can make our applications support different languages 9

9

for users around the world 10

10

which is pretty important. 11

11

For example, currencies or dates are represented 12

12

in a completely different way in Europe 13

13

or in the U.S or in Asia for example. 14

14

Now there is a lot of language specific things 15

15

that we can do with the Internationalization API. 16

16

But in this section, we're just briefly gonna talk about 17

17

formatting dates and numbers. 18

18

And starting with dates in this video. 19

19

So in our application, we have dates in two places. 20

20

First, right here, and then second here 21

21

in each of these movements. 22

22

Now, in case you're wondering why these labels 23

23

like today or yesterday or five days ago, 24

24

are gone here from my application, 25

25

it's just because I'm recording this video 26

26

a couple of days later. 27

27

But anyway, let's go to the place in our code 28

28

which displays this first date here, 29

29

so that we can format that according to different languages 30

30

and see what it looks like. 31

31

And so that is right here in the login handler function. 32

32

And in particular, this is the code that we have currently. 33

33

Remember doing this, but now we will actually be able 34

34

to get rid of all of this 35

35

and simply replace it with the Internationalization API. 36

36

So it will do this kind of formatting for us automatically. 37

37

But for now, let's actually display this date here 38

38

outside of the login 39

39

so that we can experiment a little bit with this API 40

40

without having to log in all the time. 41

41

So I will grab the current date. 42

42

Experimenting with the API. 43

43

Now then we also need to get just this part 44

44

where we do then actually display something in the DAM. 45

45

So we want to set this text content property here 46

46

to something. 47

47

And we want to set it to a formatted state. 48

48

And so let's now use the Internationalization API for that. 49

49

So that's new. 50

50

And then Intl, 51

51

and so that's basically the namespace 52

52

for the Internationalization API. 53

53

And then for times and dates, 54

54

we use the dot DateTimeFormat function. 55

55

Now all that we need to pass into this function here 56

56

is a so-called locale string. 57

57

And this locale is usually the language 58

58

and then dash the country. 59

59

So something like this. 60

60

So English and then dash U.S for example. 61

61

And so this, all of this here 62

62

will create a so-called formatter for this language 63

63

in this country. 64

64

So English dot U.S. 65

65

And I will show you a list of many 66

66

different locales here in a second, 67

67

but for now let's get started with this one. 68

68

So all of this creates a new formatter. 69

69

And then on that formatter, we can call dot format. 70

70

And then here, we actually pass in the date 71

71

that we want to format. 72

72

So that's now, and that's actually it. 73

73

So let's reload here. 74

74

Now you see that now the date is actually formatted, 75

75

and just like it is usually formatted in the U.S 76

76

with the month first and then the day. 77

77

Now English is also spoken in other languages. 78

78

Also let's try the UK now or the Great Britain. 79

79

So for the UK, we have to use this one. 80

80

And now you see that it is different. 81

81

So you have the day first, then the month. 82

82

And it also has this leading zero here. 83

83

And so you see that now it is actually formatting this date 84

84

for this exact locale date we specified here. 85

85

And so just with this one line of code, 86

86

we have correctly formatted the date 87

87

for any user around the world. 88

88

And let's try some other countries here as well. 89

89

For example, we could try Arabic for Syria. 90

90

So that would look like this. 91

91

So in the symbols that I cannot really understand, 92

92

but what matters is that it is indeed formatted correctly. 93

93

Let's just put it back here. 94

94

And to get these different codes, 95

95

let's just Google ISO language code table. 96

96

And then the one that's easiest to understand 97

97

is this one here. 98

98

So go to the one that has lingos.net, 99

99

and then from there you can find your own code 100

100

and then experiment with that 101

101

and see if it's also correct. 102

102

Now this is the most straightforward way 103

103

of formatting dates and times, 104

104

but we can actually take it to the next level 105

105

and add some options to also customize this a little bit. 106

106

For example, you see that right now, 107

107

it only displays the date here, but not any time. 108

108

And so we can change that by providing an options object 109

109

to this function here. 110

110

So let's define that options object outside here. 111

111

And I'm simply calling it options. 112

112

And so all we have to do is to specify the hours property 113

113

or hour and set it to numeric. 114

114

And the same for the minute, set it to numeric as well. 115

115

And now we have to then provide this object here 116

116

as a second argument into the DateTimeFormat function. 117

117

So options. 118

118

And of course, we could have written this object right here, 119

119

but I will add some more stuff to it in a second. 120

120

And then this line of code here becomes a little bit messy. 121

121

So it's quite usual to have a configuration object 122

122

like this one here, defined outside. 123

123

So as you see, now we get indeed the time. 124

124

But on the other hand, now the date is gone. 125

125

So let's get that back as well. 126

126

And here we can specify properties for each 127

127

of weekday, year, month, and day. 128

128

So let's start with the day 129

129

and I will set it to numeric as well. 130

130

So let's see what happens then. 131

131

And so now we only get the day. 132

132

Let's add the month as well, numeric again. 133

133

And so now we get the month here as eight. 134

134

And that's because we specified it as numeric. 135

135

But for month we can also write long. 136

136

So let's see what happens then. 137

137

And so now we get August. 138

138

And so not just the number. 139

139

And for the month, there is even another option, 140

140

which is two digit. 141

141

And so then it would be zero, eight. 142

142

But let's leave it at long. 143

143

And now the year as well, 144

144

let's set it to numeric. 145

145

And of course in quotes. 146

146

So that's 2020. 147

147

But we could also say just two digit. 148

148

And so then it would be 20. 149

149

But again, let's leave it as numeric. 150

150

And finally we can even specify the weekday. 151

151

And here I'm using long again. 152

152

And so then it will write out the day completely. 153

153

So Wednesday, August 12, 2020 154

154

and all of this nicely formatted, 155

155

just like people in the U.S do it. 156

156

Now here, we can also say short or narrow, 157

157

and you can experiment with that. 158

158

So let's see what it would look like in the UK. 159

159

So that's pretty similar, but now let's see 160

160

for example, Portugal. 161

161

So PT dash PT. 162

162

And so now you will see this here, 163

163

of course written all in Portuguese. 164

164

And the same, of course, for other locales 165

165

so for other languages. 166

166

Now in many situations, it actually makes more sense 167

167

to not define the locale manually, 168

168

but instead to simply get it from the user's browser. 169

169

And so that's pretty easy to do as well. 170

170

So let's define another variable here outside, 171

171

so locale, and then that simply navigator dot language. 172

172

So let's log it here to the console first. 173

173

So you see that mine here is set to English, Great Britain. 174

174

And so if I replace this here now, 175

175

then you will see that it will go back here 176

176

to displaying it in English. 177

177

And so if you do this yourself now, 178

178

then your date should be displayed 179

179

to whatever language you have in your browser. 180

180

Anyway, let's now take this and actually put it here 181

181

into our login. 182

182

So replacing all of this, 183

183

I will just comment it out to leave it here. 184

184

And now we have a duplicate here, 185

185

let's get rid of that. 186

186

So now the date will only get formatted 187

187

when the user actually logs in. 188

188

But now let's take a look at our account objects here. 189

189

And so you'll see that now in each of the accounts, 190

190

I defined a locale. 191

191

So account one is Portuguese 192

192

and the other one is in English. 193

193

And so let's now actually use these locales 194

194

to display Jonas state here in the Portuguese format 195

195

and Jessica state in the American format. 196

196

So that's easy enough. 197

197

We just have to find the correct place in our code. 198

198

So, yeah, that's right here. 199

199

And remember that we have the account 200

200

in the current account variable. 201

201

And so here, instead of using this locale, 202

202

that's coming from the browser, 203

203

so instead of using this, we use current account dot locale. 204

204

So let's give it a safe and now I will log in as Jonas. 205

205

And remember that should now display in a Portuguese format 206

206

and indeed it does. 207

207

Now the problem here is that our entire user interface 208

208

is in English, 209

209

but now I have this weekday here in Portuguese 210

210

and also this month name. 211

211

So to fix that, let's actually set the month here 212

212

back to numeric, 213

213

and also get entirely rid of the weekday. 214

214

So let's try that again. 215

215

So we got rid of the Portuguese words here, 216

216

but the formatting still follows 217

217

the official Portuguese way. 218

218

Now let's check out Jessica Davis. 219

219

And so you'll see, it looks different now. 220

220

It is now in the American format with the month first, 221

221

and then also with the AM time down here. 222

222

And of course you can set one of these accounts 223

223

to your own language, 224

224

to see how it would look like in your language 225

225

to make it a little bit more personalized for yourself. 226

226

Great, so with this, we have localized this date here. 227

227

Now we need to do the same with the dates down here 228

228

in the movements. 229

229

So let's go to that function which formats these dates. 230

230

Remember we created a function for that up here. 231

231

So that is format movement date. 232

232

Again let's not do this formatting here 233

233

also for these movements. 234

234

And so what we're gonna do is to replace all of this here 235

235

with a new, a nicely formatted date. 236

236

So instead of returning all of this here like we did before, 237

237

we will simply return new. 238

238

And then again, the Intl namespace DateTimeFormat. 239

239

And then here we need the locale. 240

240

And so let's actually pass that into the function. 241

241

So this function right now only receives a date, 242

242

but we also now need a locale. 243

243

So let's add that here as a second parameter. 244

244

And now wherever we call this function, 245

245

and that is down here. 246

246

So here we now need to pass in that locale, of course. 247

247

And so that comes from the account dot locale. 248

248

So the current account in here is called ACC, remember? 249

249

And so that locale is that ACC dot locale. 250

250

So return new date format, 251

251

and then simply the locale that we receive here 252

252

and then format the date. 253

253

And so that's again the date that we receive 254

254

as an input here. 255

255

And that's it. 256

256

And in this case, we don't want any options object, 257

257

because here we don't need the hours or the minutes, 258

258

all we want is to simply display the date 259

259

as simple as possible. 260

260

And in that case, we don't even need any options. 261

261

So let's give it a safe here, 262

262

try it now with Jessica Davis. 263

263

And you see that indeed, 264

264

now it is the American format 265

265

with the month first like this, 266

266

let's just transfer some money here to Jonas. 267

267

And so of course your hour today still works. 268

268

So these kind of easier to read and understand labels 269

269

that I showed you earlier. 270

270

So that is the American format. 271

271

And now let's again, see Jonah's format, 272

272

which should now change to the Portuguese one. 273

273

And indeed it did. 274

274

And so this part is now working as well. 275

275

Great, so in a nutshell, 276

276

this is how we localize dates in JavaScript 277

277

using the new Internationalization API. 278

278

And as always feel free to read the documentation on MDN. 279

279

So that's just MDN Intl. 280

280

And so here, you're gonna find 281

281

all kinds of different functions. 282

282

So I mentioned in the beginning 283

283

that there is all kinds of stuff we can do with this API. 284

284

So besides dates, so we can also format lists 285

285

or like words and our plurals. 286

286

But if you wanna learn about this one a little bit better 287

287

that we just used, 288

288

you can go ahead and read the documentation right here. 289

289

And the next video, we will use 290

290

this number format function here 291

291

to format all the remaining numbers 292

292

that we have in our application. 293

293

So let's move on and do that now.