如何更改一周中反应日期选择器日期的格式？答案

【问题标题】：How can I change the format for react datepicker days of the week?如何更改一周中反应日期选择器日期的格式？
【发布时间】：2019-06-14 17:59:29
【问题描述】：

我正在使用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;

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

【问题讨论】：

标签： reactjs react-datepicker

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

例如：

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

【讨论】：

【解决方案3】：

用途：

dateFormat={"EEEE"}

或者：

dateFormat={"EEE"}

【讨论】：

【解决方案4】：

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

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

【讨论】：

感谢您的建议。我已经更新了我的问题以显示我是如何传递属性的。我试过添加dateFormat，但没有运气。也许我没有正确传递它？

【解决方案5】：

DayPicker 允许您使用 weekdayElement 属性传递一周中的几天的自定义元素。因此，您可以创建一个 Weekday 元素，使用 react-day-picker utils 中的 formatWeekdayLong 方法将名称转换为长名称，然后将该名称缩减为 3 个字符的字符串。以下内容对我有用：

const Weekday = ({ weekday, className, localeUtils, locale }) => {
    const longWeekday = localeUtils.formatWeekdayLong(weekday, locale);
    const newWeekday = longWeekday.substring(0,3);

    return <div className={className}>{newWeekday}</div>;
};


// Date Picker Component
const InputDatePicker = () => {
  return (
    <div className='input-date-picker__container'>
      <DayPicker
        weekdayElement={<Weekday />}
      />
    </div>
  );
};

如果您查看传递给Weekday 组件的localeUtils 参数，您会发现那里传递了很多方便的方法。

【讨论】：