How to localize ember-pikaday with ember-intl

Questions
1

Ember-pikaday add-on suggested to use an initializer to translate months and weekdays in their inputs date-picker:

// app/initializers/setup-pikaday-i18n.js

import EmberObject from '@ember/object';
import moment from 'moment';

export default {
  name: 'setup-pikaday-i18n',
  initialize: function(application) {
    var i18n = EmberObject.extend({
      previousMonth: 'Vorheriger Monat',
      nextMonth: 'Nächster Monat',
      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');
  }
};

Unfortunately, it does not work if you set up the locale as ember-intl suggested:

 // app/routes/application.js
  export default Route.extend({
    intl: service(),
    beforeModel() {
      let locale = this.figureOutLocale();
      this.intl.setLocale(locale);
}
...

because the initializer is loaded before the application route beforeModel hook. And the months and weekdays are always displayed in US English (default). What is the way to go to fix that ? How is it possible to replace the above initializer with a service, for example, and use a CP ? Or some better solutions ? I also use ember-cli-moment-shim to set moment locales.

Thank you.

2

I mentioned this in the #help channel on discord, but I think I’d avoid the initializer mechanism in favor of something like this:

// app/components/pikaday-input.js
import PikadayInput from 'ember-pikaday/components/pikaday-input';
import moment from 'moment';

export default PikadayInput.extend({
  init() {
    this._super(...arguments);
    this.i18n = {
      months: moment.localeData()._months,
      weekdays: moment.localeData()._weekdays,
      weekdaysShort: moment.localeData()._weekdaysShort
    };
  }
});
2 Likes
3

Yep, thank you very much, @rwjblue, it worked for me. I had just to set moment locale in beforeModel hook of applicationroute:

  beforeModel() {
    let locale = this.figureOutLocale();
    this.intl.setLocale(locale);
    moment.locale(locale);
...