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;

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

Answer 1

最近在工作中需要类似的东西。这就是我使用formatWeekDay属性的方式：

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

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

Answer 2

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

例如：

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

Answer 3

使用：

dateFormat={"EEEE"}

或者：

dateFormat={"EEE"}

Answer 4

您可以使用名为dateFormat的道具将日期格式化为所需的输出。要使日期为Sun Mon Tue，请将dateFormat="ddd"作为道具传递给组件。像这样

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

如何更改星期反应日期选择器的格式？

4 个答案: