react-dates change weekdays label with custom label based on site language

Question

How to show custom week days label in react dates library? I am developing a multilingual site and the requirement is to show week label in the selected language.

Answer 1

We can do this by using renderDayContents function in react dates. In this function react-dates pass the moment object as input. In the object there is a key '_weekdaysMin' which is being used to show week days label on calendar. If you update the array with the custom dates array it will reflect in the calendar. Here is how:

//Function to update calendar week days label
handleWeekDays = (day) => {
    //Change week day with custom day array
    day._locale._weekdaysMin = ['SU','MO','TU','WE','TH','FR','SA'];
    // return the actual dates value(like 1,2,3 ...) from the moment object.
    return (day.format('D'));
}

In Render function pass the handleWeekDays function in the DateRangePicker or SingleDatePicker like this:

<DateRangePicker
  renderDayContents={this.handleWeekDays}
  ...
/>

Answer 2

Ot if you get the language in your props you could try changing moments locle.

render() {
   moment.locale(this.props.locale)
   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 });
          this.props.onDateChange(this.props.name, startDate, endDate);
      }}
      focusedInput={this.state.focusedInput}
      onFocusChange={focusedInput => this.setState({ focusedInput })}
      .
      .
      .
   )
}