# How to localize ember-pikaday with ember-intl

**URL:** <https://discuss.emberjs.com/t/how-to-localize-ember-pikaday-with-ember-intl/16125>\
**Category:** Questions\
**Created:** [February 4, 2019, 2:59pm UTC](https://discuss.emberjs.com/t/how-to-localize-ember-pikaday-with-ember-intl/16125 "2019-02-04T14:59:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [February 4, 2019, 2:59pm UTC](https://discuss.emberjs.com/t/how-to-localize-ember-pikaday-with-ember-intl/16125/1 "2019-02-04T14:59:23Z")

</div>

Ember-pikaday add-on [suggested](https://github.com/adopted-ember-addons/ember-pikaday#localization) to use an initializer to translate months and weekdays in their inputs date-picker:

```auto
// 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:

```auto
 // 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](https://github.com/jasonmit/ember-cli-moment-shim#cherry-pick-locales-optimal) to set `moment` locales.

Thank you.

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [February 4, 2019, 3:19pm UTC](https://discuss.emberjs.com/t/how-to-localize-ember-pikaday-with-ember-intl/16125/2 "2019-02-04T15:19:50Z")

</div>

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

```nohighlight
// 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
    };
  }
});

```

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [February 4, 2019, 3:31pm UTC](https://discuss.emberjs.com/t/how-to-localize-ember-pikaday-with-ember-intl/16125/3 "2019-02-04T15:31:59Z")

</div>

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

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

```