Instructor: 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.