# Integration of ember-i18n and moment via locale

**URL:** <https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798>\
**Category:** Uncategorized\
**Created:** [September 18, 2015, 12:10pm UTC](https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798 "2015-09-18T12:10:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgish](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgish/32/13333_2.png) [@kgish](https://discuss.emberjs.com/u/kgish)\
**Post date:** [September 18, 2015, 12:10pm UTC](https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798/1 "2015-09-18T12:10:03Z")

</div>

I’m using `ember-i18n` to switch between two languages on the fly, and it works great.

The only problem is that all the text related to `moment.js` and `bootstrap-datepicker` (which uses moment underwater) is not effected and the language there remains unchanged.

Is there an elegant manner to integrate these two so that the language switching is propogated to `moment` also?

The datepicker calendar should switch for weekdays, months etc and `days since` also.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [September 20, 2015, 5:15am UTC](https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798/2 "2015-09-20T05:15:29Z")

</div>

We could expose a service in ember-moment which all helpers will observe changes to the service’s locale. Feel free to open an issue for tracking: [https://github.com/stefanpenner/ember-moment/issues](https://github.com/stefanpenner/ember-moment/issues)

As for bootstrap-datepicker, you’ll need to rerender it on locale change.

Slightly on topic, ember-intl supports date/time formatting and has the behavior you’re after baked into the library. It does not use moment, it uses the native Intl API that most modern browsers ship with now.

---

<div class="post-metadata">

**Author:** ![kgish](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgish/32/13333_2.png) [@kgish](https://discuss.emberjs.com/u/kgish)\
**Post date:** [September 20, 2015, 3:07pm UTC](https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798/3 "2015-09-20T15:07:22Z")

</div>

I did manage to figure out how to integrate `bootstrap-datepicker` with the current language. In my template file I have:

```auto
{{bootstrap-datepicker-inline
    id="datepicker"
    ...
    language=language
    ...
}}

```

In the controller, I have:

```auto
export default Ember.ArrayController.extend({
    ...
    language: Ember.computed.alias('i18n.locale'),
    ...
});

```

which works great.

---

<div class="post-metadata">

**Author:** ![kgish](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgish/32/13333_2.png) [@kgish](https://discuss.emberjs.com/u/kgish)\
**Post date:** [September 20, 2015, 5:37pm UTC](https://discuss.emberjs.com/t/integration-of-ember-i18n-and-moment-via-locale/8798/4 "2015-09-20T17:37:12Z")

</div>

In my model I define an extra property:

```auto
birthdate_i18n: function() {
    var birthdate = this.get('birthdate');
    var lang = this.get('i18n.locale');
    moment.locale(lang).format('LLL');
    return moment(birthdate);
}.property('birthdate', 'i18n.locale'),

```