Using moment.locale('de') on react dates to show german translation but receiving below unexpected output

Question

Using moment.locale('de') under render method on react dates to show german translation but receiving below unexpected output but on refreshing, again and again, it renders right translations

Answer 1

You need to use the moment-with-locale-es6 module as the name said it is with locales ... the normal module has just english

Without any code example its pretty hard to find out what is going wrong here.

I'm using a helper function to return a new moment object with the current locale set from my i18n module and it works like charm.

Maybe it helps. Here is my helper.

import moment from 'moment-with-locales-es6';
import i18n from './i18n';

const momentWithLocale = (...args) => {
  moment.locale(i18n.locale);
  return moment(...args);
};

export default momentWithLocale;

Answer 2

 class DateRangeWrapper extends React.PureComponent {
  render() {
    const {
      startDate,
      endDate,
      onDatesChange,
      focusedInput,
      onFocusChange,
      windowStyle,
      rangeSelect,
      blockpastDates,
      displayFormat,
      localelang,
      startDatePlaceholderText,
      endDatePlaceholderText,
    } = this.props;
    **moment.locale(`${localelang}`);**
    return (
      <div className="CalendarComponent">
        <div
          className={
            windowStyle === 'Popup'
              ? windowStyle
              : classnames(windowStyle, 'inlineHeight')
          }
        >
          <DateRangePicker
            {...rangeConfig}
            startDate={rangeSelect === 'fromPresent' ? moment() : startDate}
            endDate={endDate}
            onDatesChange={onDatesChange}
            focusedInput={focusedInput}
            onFocusChange={onFocusChange}
            customArrowIcon={<ArrowIcon />}
            navPrev={<CalendarNavIcon direction="prev" />}
            navNext={<CalendarNavIcon direction="next" />}
            isOutsideRange={
              blockpastDates ? day => moment().diff(day) > 0 : () => false
            }
            renderCalendarInfo={
              windowStyle === 'Popup'
                ? () => (
                  <Controls
                    applyText={this.props.applyText}
                    cancelText={this.props.cancelText}
                    onDatePickerApply={this.props.onDatePickerApply}
                    onDatePickerClose={this.props.onDatePickerClose}
                  />
                  )
                : () => {}
            }
            displayFormat={displayFormat}
            startDatePlaceholderText={startDatePlaceholderText}
            endDatePlaceholderText={endDatePlaceholderText}
          />
        </div>
      </div>
    );
  }
}

localelang is a prop whose value is i18next.language passed from the component where this date component is used