reactjs - 如何更改星期 react 日期选择器的格式？

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传递到我的组件的方式:

App.js

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


...

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

ReservationCalendar.js

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

export default ReservationCalendar;

DatePicker.js

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

export default Calendar;

有了这样的一切，我仍然可以得到像我所附加的 View 。也许我没有正确地传递一些东西。再次感谢您的宝贵时间!

Answer 1

最近在工作中需要类似的东西。这就是我能够使用formatWeekDay prop做到的方式:

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

注意:虽然在面向公众的文档中找不到此 Prop 。