React-datepicker: Changing locale doesn't change locale text for inline datepicker

[klis87]

I have a following component:

import React from 'react';
import VendorDatePicker from 'react-datepicker';
import { connect } from 'react-redux';

import { currentLanguageSelector } from 'stores/routes/selectors';

const mapStateToProps = state => ({
  currentLanguage: currentLanguageSelector(state),
});

const DatePicker = ({ currentLanguage, ...props }) => (
  <VendorDatePicker
    inline
    locale={currentLanguage}
    {...props}
  />
);

export default connect(mapStateToProps)(DatePicker);

Expected behavior

When in redux currentLanguage is changed, new locale prop is passed to DatePicker and locale texts should be translated to a new language.

Actual behavior

When in redux currentLanguage is changed, new locale prop is passed to DatePicker and locale texts is not translated to a new language. Only for example after DatePicker internal state like selected value is changed, text is translated.

Steps to reproduce

Use DatePicker component in inline version and pass dynamic locale. After changing it, you will notice that datepicker text remains the same.

[etienne-bondot]

Did you try to import the moment locale as import 'moment/locale/<your_locale>'; ?

[klis87]

Actually moment imports all locales as the default, and I import only en-gb and pl by webpack config: new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|pl/),

Locale works fine, it is imported and translates everything correctly, the only problem is that DatePicker doesnt rerender when ONLY locale prop is changed - after any other prop like selected is changed, suddenly new locale is picked up. This issue is only for inline calendars.

[cheton]

Same to me with the following setup:

<DatePicker
    inline
    locale={locale}
/>

If I change the locale prop, it won't update current translation, unless I change the selected date with mouse click or update the "selected" prop.

[patfrat]

Same problem by my side, the locale text changes when choosing another date only !
It seems that the locale change is not listened by the DatePicker Component

[listatt]

Same issue for inline calendar

[Dean177]

A bit of a hack, but this is a quick fix:

<DatePicker
  inline={true}
  key={locale}
  locale={locale}
/>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Sonamkhurana]

Has anyone resolved this issue?