Intl to format date in Javascript?

Asked

Viewed 2,923 times

4

I’m studying the component Intl Javascript and need to format a field date who comes from the database to the Brazilian format.

Format in Mysql: 2019-12-12

And I need to turn it into 12/12/2019. The monetary I can already do this way:

let value = 1,000.11

new Intl.NumberFormat('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                       }).format(value);

I’m trying to do the same way to convert the data fields but I’m not getting.

let data = 2019-12-12
new Intl.DateTimeFormat('pt-BR').format(data);
javascript date

  • Apparently you’re passing the value as string to the format, but this method expects an object Date.

  • let data = 2019-12-12 - are you sure the code is like this? Because this is actually "2019 minus 12, minus 12" which results in the number 1995...

  • is format that is returning from mysql 2019-12-14

  • But in this case it should be in quotes: let data = '2019-12-12' - without quotation marks, Javascript interprets as numbers

3 answers

6

First you need to understand something: dates have no format.

A date is just a concept, which represents the idea of a specific point in the timeline (or in a calendar system). In the case, 2019-12-12 and 12/12/2019 are just different ways of representing the same date (same values of day, month and year). As well as Dec 12th, 2019 or 12 de dezembro de 2019, are different formats, but the date itself is the same.

Thus, the date in Mysql is not "in" a format. Only the date values are stored internally. When you query the data, then the date is shown in some format, but that doesn’t necessarily mean that it is written in that format.

So it’s not clear what you have. If 2019-12-12 for a string (i.e., a text representing the date), you can create a Date and pass it on to Intl.DateTimeFormat:

let data = new Date('2019-12-12');
console.log(new Intl.DateTimeFormat('pt-BR', {timeZone: 'UTC'}).format(data));

According to the documentation, when the string is in this format (year-month-day - or more specifically, in the format defined by ISO 8601 standard), the time is set to midnight and the date/time is considered to be in UTC.

However, the DateTimeFormat by default considers the browser time zone, which may not be the same as UTC and give a difference in the time of formatting the date (for example, my browser uses the Time of Brasilia, and midnight of day 12 in UTC corresponds to 21h of the day 11 Time of Brasilia). That’s why I informed the timeZone: 'UTC' in the builder.

In his reply worked because you also passed the time fields, and in this case Javascript considers the browser Timezone, so it is not necessary to inform that it is in UTC.

  • 1

    I always learn something new with your answers, it’s amazing! :)

2


The method Intl.DateTimeFormat.prototype.format wait as parameter an object of type Date, then you shouldn’t pass a string (if it really is a string that’s going on).

const date = new Date(2019, 11, 12);
const formated = (new Intl.DateTimeFormat('pt-br')).format(date);

console.log(formated);

It is worth remembering that in the Date the counting of months starts at 0, so the month of December was indicated as 11.

From the string just do new Date('2019-12-12').

  • 2

    Just remembering that the constructor that receives numbers will consider "midnight in the browser Timezone", while the one that receives the string '2019-12-12' considers "midnight in UTC", which requires a small adaptation in the DateTimeFormat - in accordance with my answer below. And +1 for being faster than me :-)

1

I see here in https://developer.mozilla.org and did the conversion to new Date() in this way and worked

let data = new Date('2019-12-14 00:00');
let print = new Intl.DateTimeFormat('pt-BR').format(data);

console.log(print);

Browser other questions tagged javascript date

You are not signed in. Login or sign up in order to post.