reactjs - react-dates 根据站点语言使用自定义标签更改工作日标签

Question

如何在反应日期库中显示自定义工作日标签？我正在开发一个多语言网站，要求以所选语言显示周标签。

Answer 1

我们可以通过在反应日期中使用 renderDayContents 函数来做到这一点。在此函数中，react-dates 将时刻对象作为输入传递。在对象中有一个键“_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 函数中传递 DateRangePicker 或 SingleDatePicker 中的 handleWeekDays 函数，如下所示：

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

Answer 2

如果您在道具中获得语言，则可以尝试更改时刻语言。

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