Question

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

Answer 1

我们可以通过在反应日期中使用renderDayContents函数来实现。在此函数中，反应日期将动量对象作为输入传递。在对象中，有一个键“ _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 })}
      .
      .
      .
   )
}

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

2 个答案: