Original subtitles

So JavaScript

has a new Internationalization API.

Now that sounds very fancy,

but all it does is to allow us

to easily format numbers and strings

according to different languages.

So with this new API,

we can make our applications support different languages

for users around the world

which is pretty important.

For example, currencies or dates are represented

in a completely different way in Europe

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

Now there is a lot of language specific things

that we can do with the Internationalization API.

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

formatting dates and numbers.

And starting with dates in this video.

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

First, right here, and then second here

in each of these movements.

Now, in case you're wondering why these labels

like today or yesterday or five days ago,

are gone here from my application,

it's just because I'm recording this video

a couple of days later.

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

which displays this first date here,

so that we can format that according to different languages

and see what it looks like.

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

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

Remember doing this, but now we will actually be able

to get rid of all of this

and simply replace it with the Internationalization API.

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

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

outside of the login

so that we can experiment a little bit with this API

without having to log in all the time.

So I will grab the current date.

Experimenting with the API.

Now then we also need to get just this part

where we do then actually display something in the DAM.

So we want to set this text content property here

to something.

And we want to set it to a formatted state.

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

So that's new.

And then Intl,

and so that's basically the namespace

for the Internationalization API.

And then for times and dates,

we use the dot DateTimeFormat function.

Now all that we need to pass into this function here

is a so-called locale string.

And this locale is usually the language

and then dash the country.

So something like this.

So English and then dash U.S for example.

And so this, all of this here

will create a so-called formatter for this language

in this country.

So English dot U.S.

And I will show you a list of many

different locales here in a second,

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

So all of this creates a new formatter.

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

And then here, we actually pass in the date

that we want to format.

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

So let's reload here.

Now you see that now the date is actually formatted,

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

with the month first and then the day.

Now English is also spoken in other languages.

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

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

And now you see that it is different.

So you have the day first, then the month.

And it also has this leading zero here.

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

for this exact locale date we specified here.

And so just with this one line of code,

we have correctly formatted the date

for any user around the world.

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

For example, we could try Arabic for Syria.

So that would look like this.

So in the symbols that I cannot really understand,

but what matters is that it is indeed formatted correctly.

Let's just put it back here.

And to get these different codes,

let's just Google ISO language code table.

And then the one that's easiest to understand

is this one here.

So go to the one that has lingos.net,

and then from there you can find your own code

and then experiment with that

and see if it's also correct.

Now this is the most straightforward way

of formatting dates and times,

but we can actually take it to the next level

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

For example, you see that right now,

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

And so we can change that by providing an options object

to this function here.

So let's define that options object outside here.

And I'm simply calling it options.

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

or hour and set it to numeric.

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

And now we have to then provide this object here

as a second argument into the DateTimeFormat function.

So options.

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

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

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

So it's quite usual to have a configuration object

like this one here, defined outside.

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

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

So let's get that back as well.

And here we can specify properties for each

of weekday, year, month, and day.

So let's start with the day

and I will set it to numeric as well.

So let's see what happens then.

And so now we only get the day.

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

And so now we get the month here as eight.

And that's because we specified it as numeric.

But for month we can also write long.

So let's see what happens then.

And so now we get August.

And so not just the number.

And for the month, there is even another option,

which is two digit.

And so then it would be zero, eight.

But let's leave it at long.

And now the year as well,

let's set it to numeric.

And of course in quotes.

So that's 2020.

But we could also say just two digit.

And so then it would be 20.

But again, let's leave it as numeric.

And finally we can even specify the weekday.

And here I'm using long again.

And so then it will write out the day completely.

So Wednesday, August 12, 2020

and all of this nicely formatted,

just like people in the U.S do it.

Now here, we can also say short or narrow,

and you can experiment with that.

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

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

for example, Portugal.

So PT dash PT.

And so now you will see this here,

of course written all in Portuguese.

And the same, of course, for other locales

so for other languages.

Now in many situations, it actually makes more sense

to not define the locale manually,

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

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

So let's define another variable here outside,

so locale, and then that simply navigator dot language.

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

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

And so if I replace this here now,

then you will see that it will go back here

to displaying it in English.

And so if you do this yourself now,

then your date should be displayed

to whatever language you have in your browser.

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

into our login.

So replacing all of this,

I will just comment it out to leave it here.

And now we have a duplicate here,

let's get rid of that.

So now the date will only get formatted

when the user actually logs in.

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

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

I defined a locale.

So account one is Portuguese

and the other one is in English.

And so let's now actually use these locales

to display Jonas state here in the Portuguese format

and Jessica state in the American format.

So that's easy enough.

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

So, yeah, that's right here.

And remember that we have the account

in the current account variable.

And so here, instead of using this locale,

that's coming from the browser,

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

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

And remember that should now display in a Portuguese format

and indeed it does.

Now the problem here is that our entire user interface

is in English,

but now I have this weekday here in Portuguese

and also this month name.

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

back to numeric,

and also get entirely rid of the weekday.

So let's try that again.

So we got rid of the Portuguese words here,

but the formatting still follows

the official Portuguese way.

Now let's check out Jessica Davis.

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

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

and then also with the AM time down here.

And of course you can set one of these accounts

to your own language,

to see how it would look like in your language

to make it a little bit more personalized for yourself.

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

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

in the movements.

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

Remember we created a function for that up here.

So that is format movement date.

Again let's not do this formatting here

also for these movements.

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

with a new, a nicely formatted date.

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

we will simply return new.

And then again, the Intl namespace DateTimeFormat.

And then here we need the locale.

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

So this function right now only receives a date,

but we also now need a locale.

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

And now wherever we call this function,

and that is down here.

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

And so that comes from the account dot locale.

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

And so that locale is that ACC dot locale.

So return new date format,

and then simply the locale that we receive here

and then format the date.

And so that's again the date that we receive

as an input here.

And that's it.

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

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

all we want is to simply display the date

as simple as possible.

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

So let's give it a safe here,

try it now with Jessica Davis.

And you see that indeed,

now it is the American format

with the month first like this,

let's just transfer some money here to Jonas.

And so of course your hour today still works.

So these kind of easier to read and understand labels

that I showed you earlier.

So that is the American format.

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

which should now change to the Portuguese one.

And indeed it did.

And so this part is now working as well.

Great, so in a nutshell,

this is how we localize dates in JavaScript

using the new Internationalization API.

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

So that's just MDN Intl.

And so here, you're gonna find

all kinds of different functions.

So I mentioned in the beginning

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

So besides dates, so we can also format lists

or like words and our plurals.

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

that we just used,

you can go ahead and read the documentation right here.

And the next video, we will use

this number format function here

to format all the remaining numbers

that we have in our application.

So let's move on and do that now.