Изменение даты реакции на ярлык в будние дни с настраиваемой меткой на основе языка сайта

Question

Как показать пользовательскую метку дней недели в библиотеке дат реагирования? Я занимаюсь разработкой многоязычного сайта, и мне необходимо показать ярлык недели на выбранном языке.

Answer 1

Если вы используете язык в своих реквизитах, вы можете попробовать поменять его местами.

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 })}
      .
      .
      .
   )
}

Answer 2

Мы можем сделать это, используя функцию renderDayContents в датах реагирования. В этой функции response-date передают объект момента как входные данные. В объекте есть ключ _weekdaysMin, который используется для отображения метки дней недели в календаре. Если вы обновите массив с помощью настраиваемого массива дат, он будет отражен в календаре. Вот как:

//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'));
}

В функции Render передайте функцию handleWeekDays в DateRangePicker или SingleDatePicker следующим образом:

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