Moment-Timezone is using default locale after global Moment locale is set

Question

I'm building an application written in Typescript which uses features from both Moment.js and moment-timezone. I need the date and timestamps within the application localized so in the main app.ts file I set moment's locale using the language of the device.

UPDATE: here is a gist of the sample files with additional comments https://gist.github.com/spstratis/fa853f9750a095d4acd0d1196a285be9

app.ts

import * as moment from 'moment/min/moment-with-locales';

let language = appUtil.getPhoneLanguage();

moment.locale(language);

// the expected locale is printed
console.log("Moment Locale = " + moment.locale());

The issue is, in this utilities module when I import moment-timezone, it is defaulting to 'en' locale even though I have set moment's locale globally in the main app.ts file.

Below are two of my utility methods, how can I localize the relative date strings and months if moment-timezone is defaulting them to 'en'?

I tried adding the .locale(locale) to the moment methods but that didn't change anything. If I imported moment instead of moment-timezone that worked for some of the methods but failed on any of them which needed to use the timezone utilities.

date-util.ts

import * as moment from 'moment-timezone';

export function dateRelativeTime(value): string {
  let timezoneId = appCache.getTimezoneId();
  let localTime = _getLocalUtcDateString(value, timezoneId);
  let dateMoment = moment(localTime, "MM/DD/YYYY hh:mm:ss A");
  let formatedDate = dateMoment.tz(timezoneId).fromNow();

  return formatedDate;
};

export function localizedMonths(): ValueList {
  let m = moment("2016");
  let months = new ValueList([]);
  for (var i = 0; i < 12; i++) {
    months.push({ ValueMember: [i + 1], DisplayMember: m.month(i).format('MMMM') });
  }

  return months;
};

As a side note: you can use `localeData = moment.localeData(); localeData.months();` to get localized array of month names, see [Accessing locale specific functionality](http://momentjs.com/docs/#/i18n/locale-data/) in the docs. — VincenzoC, May 31 '17 at 15:23
@Stavros_S: This is precisely the point: isolate your problem in smaller project that you can share. — BogdanBiv, May 31 '17 at 15:23

score 4 · Answer 1 · answered Apr 10 '19 at 11:31

I had the same issue in Typescript. I wanted to use moment-timezone to set timezone to Europe/Brussels and set locale to Belgian Dutch and I solved it like this:

import 'moment/locale/nl-be';
import * as momentTZ from 'moment-timezone';
momentTZ.locale("nl-be");
momentTZ.tz.setDefault("Europe/Brussels");

Now use momentTZ if you want to use moment in your project, like this f.e.

const exampleDate = momentTZ().format('dddd D MMMM');

BogdanBiv · Answer 2 · 2017-05-31T15:48:06.183

0

Have you tried .format('') ?

moment.locale();         // en
moment().format('LT');   // 6:27 PM
moment().format('LTS');  // 6:27:51 PM
moment().format('L');    // 05/31/2017
moment().format('l');    // 5/31/2017
moment().format('LL');   // May 31, 2017
moment().format('ll');   // May 31, 2017
moment().format('LLL');  // May 31, 2017 6:27 PM
moment().format('lll');  // May 31, 2017 6:27 PM
moment().format('LLLL'); // Wednesday, May 31, 2017 6:27 PM
moment().format('llll'); // Wed, May 31, 2017 6:27 PM

UPDATE: Also make sure your moment lib is the one with locale in it: https://momentjs.com/ specifies there are two moment libraries, with ( moment-with-locales.js ) and without locale ( moment.js ).

edited May 31 '17 at 15:48

answered May 31 '17 at 15:30

BogdanBiv

1,485
1
16
33

Yes - but it's still returning the values in english. Even if I set moment.locale("es"). It seems to me that moment-timezone is not respecting the locale set by moment in the other file... I'm creating a gist to help explain things better. – Stavros_S May 31 '17 at 15:34
I've added a gist to the question. You will notice I'm already using moment-with-locales in my import. – Stavros_S May 31 '17 at 15:58

Matt Johnson-Pint · Accepted Answer · 2017-05-31T19:23:59.700

0

You are importing moment wrong. Don't do this:

import * as moment from 'moment/min/moment-with-locales';

Just do this:

import * as moment from 'moment';

It will load the individual locales as you use them (on Node.js) and you will then be sharing the same moment dependency that moment-timezone uses, so your global locale will carry through.

edited May 31 '17 at 19:23

answered May 31 '17 at 17:00

Matt Johnson-Pint

230,703
74
448
575

This was actually the way I was importing it initially. It did not work though. When importing only moment, even after setting the locale. If I logged out the global locale immediately afterward it would print out "en" even after trying to set it to "es" – Stavros_S May 31 '17 at 17:12
You need to also import each local you want, as shown in the docs. Unless your running this on Node.js, in which case it will load them asynchronously as you call for them. – Matt Johnson-Pint May 31 '17 at 19:23
I'm still not having any luck, even after replicating what the documentation shows. – Stavros_S May 31 '17 at 21:05
These [here](http://momentjs.com/docs/#/use-it/typescript/) aren't working for you? – Matt Johnson-Pint May 31 '17 at 21:31
They are not, I've updated my gist to show an example of how I'm loading it. https://gist.github.com/spstratis/fa853f9750a095d4acd0d1196a285be9 – Stavros_S Jun 03 '17 at 18:34
I'm not sure from your sample code - are you always calling app.ts before calling date-util.ts? Also, why not just set the moment global locale from date-util.ts? – Matt Johnson-Pint Jun 05 '17 at 16:15
I tried updating the date-util.ts to so that I set the locale there, but moment-timezone still isn't picking up the locale. Here's a new example gist https://gist.github.com/spstratis/e1f2d46e0e7e2a9c4c37d13ef33bb195 – Stavros_S Jun 05 '17 at 18:26

score 0 · Answer 4 · answered Jul 19 '23 at 16:20

We also had this issue. This is quite an ugly workaround, because both moment and moment-timezone will be in the project, but moment-timezone package depends on moment package, so I guess they both will exist.

The idea is to apply localization to moment and then use it for moment-timezone

import moment from 'moment-timezone';
import momentLocale from 'moment';

const localeLang = ‘pt’;
moment.tz.setDefault('America/Sao_Paulo');
momentLocale.locale(localeLang);
moment.localeData(localeLang);
moment.defineLocale(localeLang, momentLocale.localeData()._config);

score -1 · Answer 5 · answered Dec 08 '21 at 23:54

I'm not sure why but I suddenly had the same issue.
It seems like you need some extra config when using moment and moment-timezone with locale setting.

Here is the minimum setup when you use only one locale.

import 'moment/locale/ja' // or whatever locale you want
import moment from 'moment'
import memontTZ from 'moment-timezone'
mementTZ.defineLocale('ja', moment.localData()._config)

I belive you can configure multiple locales by following the example below.
Ref: https://github.com/moment/moment-timezone/issues/647#issuecomment-439600573

Moment-Timezone is using default locale after global Moment locale is set

5 Answers5