React-dates: DateRangePicker, locale, i18next

[wijdench]

Hi,

I'm using i18next languages to translate dynamically DateRangePicker:
moment.locale(i18n.language);
all days and format are changed with language , but months stay in English.

"react-dates": "16.4.0",
"react": "16.2.0",
"moment": "2.21.0",

[majapw]

@wijdench where in your component are you setting the locale? Is the issue that the text remains in English or that the format remains MMMM YYYY? This is how the month title is formatted --- https://github.com/airbnb/react-dates/blob/master/src/components/CalendarMonth.jsx#L167

[wijdench]

Hi,

the issue is that the text remains in english.
i used the locale in render component

  render() {
moment.locale(i18n.language);
return (
<DateRangePicker
  startDate={this.state.startDate} 
  startDateId="start_date_id"
  endDate={this.state.endDate} 
  endDateId="end_date_id"
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} 
  focusedInput={this.state.focusedInput}
  onFocusChange={focusedInput => this.setState({ focusedInput })} 
/>
);
}

[hlthi]

// yarn add moment
// your locale - current -> turkish
// For german -> import deLocale from 'moment/locale/de';
import trLocale from 'moment/locale/tr';
import moment from 'moment';

render() {
// current -> turkish
// for german -> moment.locale('de', deLocale);
moment.locale('tr', trLocale);

return ( <DateRangePicker ........ />);
}

[wijdench]

Hi,
Is there any updates in this issue.

thanks for your help.

[pwfcurry]

// yarn add moment
// your locale - current -> turkish
// For german -> import deLocale from 'moment/locale/de';
import trLocale from 'moment/locale/tr';
import moment from 'moment';

render() {
// current -> turkish
// for german -> moment.locale('de', deLocale);
moment.locale('tr', trLocale);

return ( <DateRangePicker ........ />);
}

Thanks! Actually just the locale import fixed this for me: import "moment/locale/en-gb"; - I didn't need to set moment.locale("en-gb").

[jpcmf]

Guys, how change the input text 'Start Date' and 'End Date'?

[hlthi]

Guys, how change the input text 'Start Date' and 'End Date'?

https://github.com/airbnb/react-dates#daterangepicker, look at the input related props.

Those could be,startDatePlaceholderText and endDatePlaceholderText.