Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,260 --> 00:00:02,400
So JavaScript
2
00:00:02,400 --> 00:00:05,970
has a new Internationalization API.
3
00:00:05,970 --> 00:00:08,350
Now that sounds very fancy,
4
00:00:08,350 --> 00:00:10,530
but all it does is to allow us
5
00:00:10,530 --> 00:00:13,400
to easily format numbers and strings
6
00:00:13,400 --> 00:00:15,970
according to different languages.
7
00:00:15,970 --> 00:00:17,980
So with this new API,
8
00:00:17,980 --> 00:00:21,440
we can make our applications support different languages
9
00:00:21,440 --> 00:00:23,440
for users around the world
10
00:00:23,440 --> 00:00:25,290
which is pretty important.
11
00:00:25,290 --> 00:00:28,960
For example, currencies or dates are represented
12
00:00:28,960 --> 00:00:31,350
in a completely different way in Europe
13
00:00:31,350 --> 00:00:35,240
or in the U.S or in Asia for example.
14
00:00:35,240 --> 00:00:38,450
Now there is a lot of language specific things
15
00:00:38,450 --> 00:00:42,070
that we can do with the Internationalization API.
16
00:00:42,070 --> 00:00:45,590
But in this section, we're just briefly gonna talk about
17
00:00:45,590 --> 00:00:48,370
formatting dates and numbers.
18
00:00:48,370 --> 00:00:51,363
And starting with dates in this video.
19
00:00:53,040 --> 00:00:56,740
So in our application, we have dates in two places.
20
00:00:56,740 --> 00:00:59,170
First, right here, and then second here
21
00:00:59,170 --> 00:01:01,640
in each of these movements.
22
00:01:01,640 --> 00:01:04,300
Now, in case you're wondering why these labels
23
00:01:04,300 --> 00:01:08,460
like today or yesterday or five days ago,
24
00:01:08,460 --> 00:01:10,900
are gone here from my application,
25
00:01:10,900 --> 00:01:13,030
it's just because I'm recording this video
26
00:01:13,030 --> 00:01:14,373
a couple of days later.
27
00:01:16,241 --> 00:01:20,800
But anyway, let's go to the place in our code
28
00:01:20,800 --> 00:01:23,863
which displays this first date here,
29
00:01:24,990 --> 00:01:28,130
so that we can format that according to different languages
30
00:01:28,130 --> 00:01:29,533
and see what it looks like.
31
00:01:30,840 --> 00:01:34,063
And so that is right here in the login handler function.
32
00:01:34,960 --> 00:01:38,923
And in particular, this is the code that we have currently.
33
00:01:39,890 --> 00:01:43,250
Remember doing this, but now we will actually be able
34
00:01:43,250 --> 00:01:45,880
to get rid of all of this
35
00:01:45,880 --> 00:01:49,630
and simply replace it with the Internationalization API.
36
00:01:49,630 --> 00:01:52,823
So it will do this kind of formatting for us automatically.
37
00:01:53,740 --> 00:01:56,982
But for now, let's actually display this date here
38
00:01:56,982 --> 00:01:58,880
outside of the login
39
00:01:58,880 --> 00:02:02,230
so that we can experiment a little bit with this API
40
00:02:02,230 --> 00:02:04,263
without having to log in all the time.
41
00:02:06,100 --> 00:02:08,823
So I will grab the current date.
42
00:02:14,150 --> 00:02:16,523
Experimenting with the API.
43
00:02:19,351 --> 00:02:23,350
Now then we also need to get just this part
44
00:02:23,350 --> 00:02:28,350
where we do then actually display something in the DAM.
45
00:02:31,230 --> 00:02:34,390
So we want to set this text content property here
46
00:02:34,390 --> 00:02:35,223
to something.
47
00:02:36,900 --> 00:02:40,400
And we want to set it to a formatted state.
48
00:02:40,400 --> 00:02:44,510
And so let's now use the Internationalization API for that.
49
00:02:44,510 --> 00:02:46,140
So that's new.
50
00:02:46,140 --> 00:02:48,600
And then Intl,
51
00:02:48,600 --> 00:02:51,250
and so that's basically the namespace
52
00:02:51,250 --> 00:02:53,393
for the Internationalization API.
53
00:02:54,230 --> 00:02:56,340
And then for times and dates,
54
00:02:56,340 --> 00:03:00,003
we use the dot DateTimeFormat function.
55
00:03:05,490 --> 00:03:08,740
Now all that we need to pass into this function here
56
00:03:08,740 --> 00:03:11,710
is a so-called locale string.
57
00:03:11,710 --> 00:03:14,880
And this locale is usually the language
58
00:03:14,880 --> 00:03:17,010
and then dash the country.
59
00:03:17,010 --> 00:03:19,230
So something like this.
60
00:03:19,230 --> 00:03:23,333
So English and then dash U.S for example.
61
00:03:25,105 --> 00:03:27,100
And so this, all of this here
62
00:03:27,100 --> 00:03:31,370
will create a so-called formatter for this language
63
00:03:31,370 --> 00:03:32,490
in this country.
64
00:03:32,490 --> 00:03:34,420
So English dot U.S.
65
00:03:34,420 --> 00:03:36,420
And I will show you a list of many
66
00:03:36,420 --> 00:03:38,630
different locales here in a second,
67
00:03:38,630 --> 00:03:41,550
but for now let's get started with this one.
68
00:03:41,550 --> 00:03:43,800
So all of this creates a new formatter.
69
00:03:43,800 --> 00:03:47,433
And then on that formatter, we can call dot format.
70
00:03:50,793 --> 00:03:53,640
And then here, we actually pass in the date
71
00:03:53,640 --> 00:03:55,210
that we want to format.
72
00:03:55,210 --> 00:03:58,513
So that's now, and that's actually it.
73
00:03:59,810 --> 00:04:01,113
So let's reload here.
74
00:04:02,670 --> 00:04:06,520
Now you see that now the date is actually formatted,
75
00:04:06,520 --> 00:04:09,590
and just like it is usually formatted in the U.S
76
00:04:09,590 --> 00:04:12,747
with the month first and then the day.
77
00:04:13,840 --> 00:04:17,170
Now English is also spoken in other languages.
78
00:04:17,170 --> 00:04:21,150
Also let's try the UK now or the Great Britain.
79
00:04:21,150 --> 00:04:24,143
So for the UK, we have to use this one.
80
00:04:25,400 --> 00:04:28,240
And now you see that it is different.
81
00:04:28,240 --> 00:04:30,660
So you have the day first, then the month.
82
00:04:30,660 --> 00:04:33,290
And it also has this leading zero here.
83
00:04:33,290 --> 00:04:37,610
And so you see that now it is actually formatting this date
84
00:04:37,610 --> 00:04:41,820
for this exact locale date we specified here.
85
00:04:41,820 --> 00:04:44,120
And so just with this one line of code,
86
00:04:44,120 --> 00:04:46,380
we have correctly formatted the date
87
00:04:46,380 --> 00:04:48,950
for any user around the world.
88
00:04:48,950 --> 00:04:51,900
And let's try some other countries here as well.
89
00:04:51,900 --> 00:04:56,900
For example, we could try Arabic for Syria.
90
00:04:57,020 --> 00:04:58,593
So that would look like this.
91
00:05:00,600 --> 00:05:04,770
So in the symbols that I cannot really understand,
92
00:05:04,770 --> 00:05:09,530
but what matters is that it is indeed formatted correctly.
93
00:05:09,530 --> 00:05:10,930
Let's just put it back here.
94
00:05:13,761 --> 00:05:17,260
And to get these different codes,
95
00:05:17,260 --> 00:05:22,260
let's just Google ISO language code table.
96
00:05:24,940 --> 00:05:28,170
And then the one that's easiest to understand
97
00:05:28,170 --> 00:05:29,690
is this one here.
98
00:05:29,690 --> 00:05:32,730
So go to the one that has lingos.net,
99
00:05:32,730 --> 00:05:35,740
and then from there you can find your own code
100
00:05:35,740 --> 00:05:37,450
and then experiment with that
101
00:05:37,450 --> 00:05:39,393
and see if it's also correct.
102
00:05:43,958 --> 00:05:46,690
Now this is the most straightforward way
103
00:05:46,690 --> 00:05:48,810
of formatting dates and times,
104
00:05:48,810 --> 00:05:51,270
but we can actually take it to the next level
105
00:05:51,270 --> 00:05:55,010
and add some options to also customize this a little bit.
106
00:05:55,010 --> 00:05:57,310
For example, you see that right now,
107
00:05:57,310 --> 00:06:01,033
it only displays the date here, but not any time.
108
00:06:02,170 --> 00:06:06,580
And so we can change that by providing an options object
109
00:06:06,580 --> 00:06:08,193
to this function here.
110
00:06:09,320 --> 00:06:12,973
So let's define that options object outside here.
111
00:06:16,490 --> 00:06:19,313
And I'm simply calling it options.
112
00:06:20,240 --> 00:06:23,780
And so all we have to do is to specify the hours property
113
00:06:24,900 --> 00:06:28,883
or hour and set it to numeric.
114
00:06:30,290 --> 00:06:35,290
And the same for the minute, set it to numeric as well.
115
00:06:37,240 --> 00:06:40,920
And now we have to then provide this object here
116
00:06:40,920 --> 00:06:44,733
as a second argument into the DateTimeFormat function.
117
00:06:45,920 --> 00:06:47,680
So options.
118
00:06:47,680 --> 00:06:50,870
And of course, we could have written this object right here,
119
00:06:50,870 --> 00:06:54,290
but I will add some more stuff to it in a second.
120
00:06:54,290 --> 00:06:57,730
And then this line of code here becomes a little bit messy.
121
00:06:57,730 --> 00:07:01,220
So it's quite usual to have a configuration object
122
00:07:01,220 --> 00:07:03,563
like this one here, defined outside.
123
00:07:04,890 --> 00:07:09,400
So as you see, now we get indeed the time.
124
00:07:09,400 --> 00:07:13,320
But on the other hand, now the date is gone.
125
00:07:13,320 --> 00:07:15,830
So let's get that back as well.
126
00:07:15,830 --> 00:07:18,740
And here we can specify properties for each
127
00:07:18,740 --> 00:07:22,327
of weekday, year, month, and day.
128
00:07:23,370 --> 00:07:25,060
So let's start with the day
129
00:07:26,000 --> 00:07:29,550
and I will set it to numeric as well.
130
00:07:29,550 --> 00:07:31,100
So let's see what happens then.
131
00:07:32,308 --> 00:07:34,123
And so now we only get the day.
132
00:07:37,430 --> 00:07:42,430
Let's add the month as well, numeric again.
133
00:07:43,710 --> 00:07:47,133
And so now we get the month here as eight.
134
00:07:48,900 --> 00:07:52,010
And that's because we specified it as numeric.
135
00:07:52,010 --> 00:07:54,913
But for month we can also write long.
136
00:07:55,900 --> 00:07:58,090
So let's see what happens then.
137
00:07:58,090 --> 00:08:00,690
And so now we get August.
138
00:08:00,690 --> 00:08:02,820
And so not just the number.
139
00:08:02,820 --> 00:08:06,090
And for the month, there is even another option,
140
00:08:06,090 --> 00:08:08,293
which is two digit.
141
00:08:09,550 --> 00:08:11,350
And so then it would be zero, eight.
142
00:08:12,320 --> 00:08:14,293
But let's leave it at long.
143
00:08:15,260 --> 00:08:17,593
And now the year as well,
144
00:08:19,060 --> 00:08:21,143
let's set it to numeric.
145
00:08:22,910 --> 00:08:24,223
And of course in quotes.
146
00:08:28,630 --> 00:08:30,610
So that's 2020.
147
00:08:30,610 --> 00:08:34,520
But we could also say just two digit.
148
00:08:34,520 --> 00:08:36,540
And so then it would be 20.
149
00:08:36,540 --> 00:08:39,220
But again, let's leave it as numeric.
150
00:08:39,220 --> 00:08:42,463
And finally we can even specify the weekday.
151
00:08:46,550 --> 00:08:48,750
And here I'm using long again.
152
00:08:48,750 --> 00:08:53,130
And so then it will write out the day completely.
153
00:08:53,130 --> 00:08:56,200
So Wednesday, August 12, 2020
154
00:08:56,200 --> 00:08:58,700
and all of this nicely formatted,
155
00:08:58,700 --> 00:09:01,893
just like people in the U.S do it.
156
00:09:04,070 --> 00:09:07,310
Now here, we can also say short or narrow,
157
00:09:07,310 --> 00:09:09,223
and you can experiment with that.
158
00:09:12,040 --> 00:09:14,573
So let's see what it would look like in the UK.
159
00:09:16,050 --> 00:09:19,210
So that's pretty similar, but now let's see
160
00:09:19,210 --> 00:09:21,900
for example, Portugal.
161
00:09:21,900 --> 00:09:24,960
So PT dash PT.
162
00:09:24,960 --> 00:09:26,960
And so now you will see this here,
163
00:09:26,960 --> 00:09:30,420
of course written all in Portuguese.
164
00:09:30,420 --> 00:09:33,490
And the same, of course, for other locales
165
00:09:33,490 --> 00:09:35,700
so for other languages.
166
00:09:35,700 --> 00:09:39,010
Now in many situations, it actually makes more sense
167
00:09:39,010 --> 00:09:42,000
to not define the locale manually,
168
00:09:42,000 --> 00:09:45,600
but instead to simply get it from the user's browser.
169
00:09:45,600 --> 00:09:47,693
And so that's pretty easy to do as well.
170
00:09:50,700 --> 00:09:54,090
So let's define another variable here outside,
171
00:09:54,090 --> 00:09:59,090
so locale, and then that simply navigator dot language.
172
00:10:04,330 --> 00:10:07,283
So let's log it here to the console first.
173
00:10:10,320 --> 00:10:14,293
So you see that mine here is set to English, Great Britain.
174
00:10:15,520 --> 00:10:17,433
And so if I replace this here now,
175
00:10:18,950 --> 00:10:21,710
then you will see that it will go back here
176
00:10:21,710 --> 00:10:23,493
to displaying it in English.
177
00:10:25,400 --> 00:10:27,693
And so if you do this yourself now,
178
00:10:27,693 --> 00:10:29,880
then your date should be displayed
179
00:10:29,880 --> 00:10:32,713
to whatever language you have in your browser.
180
00:10:34,790 --> 00:10:38,380
Anyway, let's now take this and actually put it here
181
00:10:38,380 --> 00:10:39,923
into our login.
182
00:10:41,080 --> 00:10:43,410
So replacing all of this,
183
00:10:43,410 --> 00:10:45,610
I will just comment it out to leave it here.
184
00:10:50,360 --> 00:10:53,480
And now we have a duplicate here,
185
00:10:53,480 --> 00:10:54,613
let's get rid of that.
186
00:10:55,940 --> 00:10:58,410
So now the date will only get formatted
187
00:10:58,410 --> 00:11:00,393
when the user actually logs in.
188
00:11:02,940 --> 00:11:07,940
But now let's take a look at our account objects here.
189
00:11:08,150 --> 00:11:11,000
And so you'll see that now in each of the accounts,
190
00:11:11,000 --> 00:11:12,863
I defined a locale.
191
00:11:14,160 --> 00:11:17,660
So account one is Portuguese
192
00:11:17,660 --> 00:11:19,533
and the other one is in English.
193
00:11:20,600 --> 00:11:23,770
And so let's now actually use these locales
194
00:11:23,770 --> 00:11:28,090
to display Jonas state here in the Portuguese format
195
00:11:28,090 --> 00:11:31,593
and Jessica state in the American format.
196
00:11:34,930 --> 00:11:37,093
So that's easy enough.
197
00:11:38,070 --> 00:11:40,763
We just have to find the correct place in our code.
198
00:11:41,770 --> 00:11:44,350
So, yeah, that's right here.
199
00:11:44,350 --> 00:11:46,280
And remember that we have the account
200
00:11:46,280 --> 00:11:49,050
in the current account variable.
201
00:11:49,050 --> 00:11:51,600
And so here, instead of using this locale,
202
00:11:51,600 --> 00:11:53,150
that's coming from the browser,
203
00:11:54,520 --> 00:11:59,520
so instead of using this, we use current account dot locale.
204
00:12:01,930 --> 00:12:06,580
So let's give it a safe and now I will log in as Jonas.
205
00:12:06,580 --> 00:12:10,920
And remember that should now display in a Portuguese format
206
00:12:10,920 --> 00:12:13,190
and indeed it does.
207
00:12:13,190 --> 00:12:16,890
Now the problem here is that our entire user interface
208
00:12:16,890 --> 00:12:18,180
is in English,
209
00:12:18,180 --> 00:12:21,870
but now I have this weekday here in Portuguese
210
00:12:21,870 --> 00:12:24,620
and also this month name.
211
00:12:24,620 --> 00:12:28,420
So to fix that, let's actually set the month here
212
00:12:28,420 --> 00:12:29,673
back to numeric,
213
00:12:32,270 --> 00:12:35,373
and also get entirely rid of the weekday.
214
00:12:37,510 --> 00:12:39,023
So let's try that again.
215
00:12:41,210 --> 00:12:44,300
So we got rid of the Portuguese words here,
216
00:12:44,300 --> 00:12:46,350
but the formatting still follows
217
00:12:46,350 --> 00:12:48,033
the official Portuguese way.
218
00:12:49,380 --> 00:12:51,713
Now let's check out Jessica Davis.
219
00:12:54,060 --> 00:12:56,320
And so you'll see, it looks different now.
220
00:12:56,320 --> 00:12:59,910
It is now in the American format with the month first,
221
00:12:59,910 --> 00:13:03,980
and then also with the AM time down here.
222
00:13:03,980 --> 00:13:06,660
And of course you can set one of these accounts
223
00:13:06,660 --> 00:13:08,270
to your own language,
224
00:13:08,270 --> 00:13:11,330
to see how it would look like in your language
225
00:13:11,330 --> 00:13:15,340
to make it a little bit more personalized for yourself.
226
00:13:15,340 --> 00:13:19,960
Great, so with this, we have localized this date here.
227
00:13:19,960 --> 00:13:22,500
Now we need to do the same with the dates down here
228
00:13:22,500 --> 00:13:23,533
in the movements.
229
00:13:24,860 --> 00:13:28,963
So let's go to that function which formats these dates.
230
00:13:29,980 --> 00:13:33,980
Remember we created a function for that up here.
231
00:13:33,980 --> 00:13:36,303
So that is format movement date.
232
00:13:37,730 --> 00:13:40,000
Again let's not do this formatting here
233
00:13:41,070 --> 00:13:43,010
also for these movements.
234
00:13:43,010 --> 00:13:46,040
And so what we're gonna do is to replace all of this here
235
00:13:46,920 --> 00:13:49,833
with a new, a nicely formatted date.
236
00:13:52,790 --> 00:13:57,050
So instead of returning all of this here like we did before,
237
00:13:57,050 --> 00:13:59,663
we will simply return new.
238
00:14:00,960 --> 00:14:05,687
And then again, the Intl namespace DateTimeFormat.
239
00:14:08,500 --> 00:14:11,320
And then here we need the locale.
240
00:14:11,320 --> 00:14:14,043
And so let's actually pass that into the function.
241
00:14:16,110 --> 00:14:20,170
So this function right now only receives a date,
242
00:14:20,170 --> 00:14:22,193
but we also now need a locale.
243
00:14:23,290 --> 00:14:28,070
So let's add that here as a second parameter.
244
00:14:28,070 --> 00:14:30,113
And now wherever we call this function,
245
00:14:32,180 --> 00:14:35,210
and that is down here.
246
00:14:35,210 --> 00:14:38,170
So here we now need to pass in that locale, of course.
247
00:14:38,170 --> 00:14:41,133
And so that comes from the account dot locale.
248
00:14:42,090 --> 00:14:46,163
So the current account in here is called ACC, remember?
249
00:14:47,854 --> 00:14:50,763
And so that locale is that ACC dot locale.
250
00:14:54,630 --> 00:14:57,940
So return new date format,
251
00:14:57,940 --> 00:15:00,890
and then simply the locale that we receive here
252
00:15:04,210 --> 00:15:06,573
and then format the date.
253
00:15:09,930 --> 00:15:12,700
And so that's again the date that we receive
254
00:15:12,700 --> 00:15:13,763
as an input here.
255
00:15:15,690 --> 00:15:16,880
And that's it.
256
00:15:16,880 --> 00:15:20,240
And in this case, we don't want any options object,
257
00:15:20,240 --> 00:15:24,000
because here we don't need the hours or the minutes,
258
00:15:24,000 --> 00:15:26,690
all we want is to simply display the date
259
00:15:26,690 --> 00:15:28,430
as simple as possible.
260
00:15:28,430 --> 00:15:31,253
And in that case, we don't even need any options.
261
00:15:32,260 --> 00:15:34,130
So let's give it a safe here,
262
00:15:34,130 --> 00:15:36,623
try it now with Jessica Davis.
263
00:15:39,300 --> 00:15:40,980
And you see that indeed,
264
00:15:40,980 --> 00:15:43,150
now it is the American format
265
00:15:43,150 --> 00:15:45,673
with the month first like this,
266
00:15:46,820 --> 00:15:49,683
let's just transfer some money here to Jonas.
267
00:15:52,000 --> 00:15:55,300
And so of course your hour today still works.
268
00:15:55,300 --> 00:15:58,690
So these kind of easier to read and understand labels
269
00:15:58,690 --> 00:16:00,023
that I showed you earlier.
270
00:16:02,350 --> 00:16:04,140
So that is the American format.
271
00:16:04,140 --> 00:16:07,510
And now let's again, see Jonah's format,
272
00:16:07,510 --> 00:16:10,700
which should now change to the Portuguese one.
273
00:16:10,700 --> 00:16:13,130
And indeed it did.
274
00:16:13,130 --> 00:16:15,363
And so this part is now working as well.
275
00:16:16,210 --> 00:16:18,700
Great, so in a nutshell,
276
00:16:18,700 --> 00:16:22,020
this is how we localize dates in JavaScript
277
00:16:22,020 --> 00:16:25,260
using the new Internationalization API.
278
00:16:25,260 --> 00:16:29,343
And as always feel free to read the documentation on MDN.
279
00:16:30,630 --> 00:16:33,263
So that's just MDN Intl.
280
00:16:34,760 --> 00:16:35,910
And so here, you're gonna find
281
00:16:35,910 --> 00:16:38,270
all kinds of different functions.
282
00:16:38,270 --> 00:16:39,640
So I mentioned in the beginning
283
00:16:39,640 --> 00:16:43,400
that there is all kinds of stuff we can do with this API.
284
00:16:43,400 --> 00:16:48,400
So besides dates, so we can also format lists
285
00:16:49,360 --> 00:16:53,363
or like words and our plurals.
286
00:16:56,330 --> 00:16:59,230
But if you wanna learn about this one a little bit better
287
00:16:59,230 --> 00:17:00,470
that we just used,
288
00:17:00,470 --> 00:17:04,363
you can go ahead and read the documentation right here.
289
00:17:05,370 --> 00:17:07,103
And the next video, we will use
290
00:17:07,103 --> 00:17:09,520
this number format function here
291
00:17:09,520 --> 00:17:11,370
to format all the remaining numbers
292
00:17:11,370 --> 00:17:13,430
that we have in our application.
293
00:17:13,430 --> 00:17:15,723
So let's move on and do that now.
21590
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.