React-dates: Language: Days get settled language but months don't

[tonydtran]

Hi guys, I have an issue I hope you can help. The question is in the title, the settled language is in French, so days are in French but months stay in English. I tried everything I could, I think you guys would be better than me. I'm sure the problem is very simple, but I don't see it !

The baby coder that I am thanks you a lot !

import React, { Component } from 'react'
import { SingleDatePicker } from 'react-dates'
import moment from 'moment'

moment.locale('fr')

class DatePicker extends Component {
  state = {}

  componentWillReceiveProps (props) {
    if (props.focused) {
      this.setState({focused: props.focused})
    }
  }

  handleChange = (onChange, value) => {
    this.setState({ focused: false }, () => {
      onChange(value)
    })
  }

  render () {
    const { input: { onChange, value } } = this.props

    return (
      <SingleDatePicker
        date={value || null}
        onDateChange={(value) => this.handleChange(onChange, value)}
        focused={this.state.focused}
        onFocusChange={({ focused }) => this.setState({ focused })}
        numberOfMonths={1}
        displayFormat={() => moment.localeData('fr').longDateFormat('L')}
      />
    )
  }
}

export default DatePicker

[ljharb]

(unrelated to your problem; i'd put the moment.locale() call in componentWillMount prior to the first render, rather than in the top level of the module)

I believe to fix this we'd need to save the moment locale in the state of CalendarMonthGrid, and in componentWillReceiveProps, recalculate the months if the locale has changed. @majapw, thoughts?

[tonydtran]

Thank you @ljharb for your quick answer. I took your advice but the problem is still there (I understand it wasn't a solution but an advice, thanks again about that). What can I do to resolve this ? Sorry for my poor javascript skill, just started to learn last year :)

[majapw]

@ljharb that seems like a reasonable solution. Someone else was having the same problem as well... why does it work in the storybook is my Q I guess?

[majapw]

We need to submit a PR to make this happen! 🎉

[aszx87410]

I also encounter this problem and solved by changing the locale in the constructor.

example:

class DatePicker extends Component {
  constructor (props) {
    super(props);
    moment.locale('zh-tw');
  }
}

[tonydtran]

Hi,

thanks you for your answer, I already tried this and it didn’t work at this time, but I don’t know why, the problem has been solved now by itself. Magic 😉

Le 14 juin 2017 à 11:14, Huli [e-mail] a écrit :

I also encounter this problem and solved by changing the locale in the constructor.

example:

class DatePicker extends Component {
constructor (props) {
super(props);
moment.locale('zh-tw');
}
}
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/airbnb/react-dates/issues/480#issuecomment-308372920, or mute the thread https://github.com/notifications/unsubscribe-auth/ARDH0fIXImwkFshtEi4z_s5WhGGbAEXpks5sD6RbgaJpZM4NLw-p.

[phsantiago]

I've a similar problem, solved adding a import 'moment/locale/fr' after moment import