Globally set locale does not change months names (still in English)

[belgoros]

I followed the ember-i18n steps to set up a locale globally as well for moment service:

#instance-initializers/i18n.js

export function initialize(applicationInstance) {
  let i18n = applicationInstance.lookup('service:i18n');
  let moment = applicationInstance.lookup('service:moment');
  let locale = calculateLocale(i18n.get('locales'));
  i18n.set('locale', locale);
  moment.setLocale(locale);
}

function calculateLocale(locales) {
  // whatever you do to pick a locale for the user:
  const language = navigator.languages[0] || navigator.language || navigator.userLanguage;

  return  locales.includes(language.toLowerCase()) ? language : 'en-GB';
}

export default {
  name: 'i18n',
  initialize
};

When I created an initializer as suggested in your README#Localization section, it still has no effect:

import Ember from 'ember';
import moment from 'moment';

export default {
  name: 'setup-pikaday-i18n',
  initialize: function(application) {
    var i18n = Ember.Object.extend({
      months: moment.localeData()._months,
      weekdays: moment.localeData()._weekdays,
      weekdaysShort: moment.localeData()._weekdaysShort
    });

    application.register('pikaday-i18n:main', i18n, { singleton: true });
    application.inject('component:pikaday-input', 'i18n', 'pikaday-i18n:main');
  }
};

Months are still displayed in English. I also inclide all locales in environment.js as follows:

module.exports = function(environment) {
  let ENV = {
...
moment: {
      includeLocales: true
    }
  };

I also defined i18.js initializer:

#initializers/i18.js

export default {
  name: 'i18n',

  after: 'ember-i18n',

  initialize: function(app) {
    app.inject('model', 'i18n', 'service:i18n');
    app.inject('controller', 'i18n', 'service:i18n');
    app.inject('route', 'i18n', 'service:i18n');
  }
};

What am I doing wrong ?

[belgoros]

It works if I put the initializer in instance-initializers directory and NOT in initializeras explained in Localization section of README.

[afriqs]

Hi @belgoros , I have the same issue. Which initializer did you move to instance initializers ?

Note: noob with emberjs.

[belgoros]

@afriqs I moved setup-pikaday-i18n.js defined as follows:

import Ember from 'ember';
import moment from 'moment';

export default {
  name: 'setup-pikaday-i18n',
  initialize: function(application) {
    var i18n = Ember.Object.extend({
      months: moment.localeData()._months,
      weekdays: moment.localeData()._weekdays,
      weekdaysShort: moment.localeData()._weekdaysShort
    });

    application.register('pikaday-i18n:main', i18n, { singleton: true });
    application.inject('component:pikaday-input', 'i18n', 'pikaday-i18n:main');
  }
};

to app/instance-initializers/setup-pikaday-i18n.js. Hope this helps.

[afriqs]

@belgoros Thanks for your feedback but unfortunately I did not manage to localize the datepicker :disappointed: : will have to dig deeper...

[yanchogeorgiev]

@afriqs If you're using inputless component, add this line in the bottom of initialize method: application.inject('component:pikaday-inputless', 'i18n', 'pikaday-i18n:main');

[alexlafroscia]

I think the issue here could be the timing between your initializers.

1. One initializer determines what the current locale should be based on some logic and sets that on the i18n and moment services
2. Another initializer reads from the global moment object and uses that information to configure Pikaday

Are you sure that 1 happens before 2?

I would suggest specifying the order of the initializers and making sure that 1 happens before 2.

I'm going to close this issue for now -- please let me know if that doesn't solve the issue and I'm happy to re-open this.

If that doesn't solve the problem and you can produce a simple reproduction application, I'm also happy to dig into that and see if there is a bug here.