CODEWITHSUNDEEP
javascriptmomentjs
wawanopoulos
wawanopoulos

Reputation: 9794

Moment.js : Format date according browser lang

I use this code to display a date in French format :

var dateToDisplay = moment(myDateInMS, "x").format("DD/MM/YYYY - hh:mm:ss"); // Output : "20/03/2016 - 12:35:32"

I would like to improve this display to have a better display according the browser language. How can i do that using moment ?

Upvotes: 1

Views: 4152

Answers (2)

Maggie Pint
Maggie Pint

Reputation: 2452

Moment will actually search for substrings of the locale pulled from the browser in an attempt to pick the correct locale. Thus, there is no need to preparse or create a case statement. As an example, moment has es as a locale, but not es-mx. If the browser is set to es-mx the locale function looks for es-mx and when it doesn't find it, falls back to es. Thus:

moment.locale('es-mx');
"es"

Meaning that for your purposes you can just do:

moment.locale(navigator.userLanguage || navigator.language);

Then when formatting your dates, use one of the locale specific formats to make them appropriate for the user:

moment().format('LL')
"1 de abril de 2016"
moment().format('L')
"01/04/2016"

For all of the localized formats and what they should produce, see the localized format section of the format documentation: http://momentjs.com/docs/#/displaying/format/

Upvotes: 1

Emil Oberg
Emil Oberg

Reputation: 4046

I do not recommend setting the locale depending on the browser language as it's not a clear signal of the actual locale of the user. E.g. a user may use an English operating system even though s/he's a French speaker.

That being said. Reading the language from the browser and setting Moment.js to the corresponding locale can be done this way:

var localeData = moment.localeData();

switch (navigator.language || navigator.userLanguage) {
    case 'fr':
        localeData = moment.localeData('fr');
        break;
}

localeData.longDateFormat('LL'); // the example 'LL' will output date in "D MMMM YYYY format"

Notice that this is setting the locale of the entire Moment.js instance (which is probably what you want to do). Also notice that as of Moment.js 2.8.0, changing the global locale doesn't affect existing instances.

Also see

Upvotes: 2

Related Questions