如何更改每周反应日期选择器天数的格式？

Question

我正在使用React Datepicker，一切都很好。

而不是在一周中的几天使用“Su”“Mo”“Tu”等，我想使用这样的东西：

"Sun" "Mon" "Tue" 

我正在通过 css 完成此操作：

.react-datepicker__day-name {
    ...
    &:first-child {
        &:after {
            visibility: visible;
            position: relative;
            left: -0.5rem;
            text-align: center;
            content: "Sun";
        }
    }
}

它似乎有效，但似乎也很“hacky”。是否有我在某处缺少的配置选项可以指定我想使用的格式？

感谢您的任何建议！

编辑

这是我（尝试）将 传递dateFormat给我的组件的方式：

应用程序.js

this.state = {
    startDate: new Date(),
    dateFormat: 'ddd'
};


...

render() {
    ...
     <ReservationCalendar
         dateFormat={ this.state.dateFormat }
         startDate={ this.state.startDate  }
     />
}

预订日历.js

const ReservationCalendar = ({dateFormat, startDate}) => (
    <Calendar
        dateFormat={ dateFormat }
        startDate={ startDate }/>
);

export default ReservationCalendar;

日期选择器.js

const Calendar = ({dateFormat, startDate}) => (
    <div className="my-calendar">
        <DatePicker
            inline
            dateFormat={ dateFormat }
            selected={ startDate }
        />
    </div>
);

export default Calendar;

有了这样的一切，我仍然得到了我附加的观点。也许我没有正确传递某些东西。再次感谢您的时间！

Answer 1

最近在工作中需要类似的东西。这就是我如何使用formatWeekDayprop做到的：

<DatePicker
  formatWeekDay={nameOfDay => nameOfDay.substr(0,3)}
/>;

注意：虽然在面向公众的文档中找不到这个道具。

Answer 2

您可以使用react-datepicker的useWeekdaysShort属性。

例如：

<DatePicker>
  useWeekdaysShort={true}
</DatePicker>

Answer 3

Use:

dateFormat={"EEEE"}

Or:

dateFormat={"EEE"}

Answer 4

您可以使用名为的属性dateFormat将日期格式化为您想要的输出。要获取天数Sun Mon Tue，请将dateFormat="ddd"其作为 props 传递给组件。像这样

<DatePicker
dateFormat="ddd"
onChange={this.handleChange} />