10

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

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

在此处输入图像描述

4

5 回答 5

21

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

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

日历截图

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

于 2020-02-21T09:31:32.963 回答
4

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

例如：

<DatePicker>
useWeekdaysShort={true}
</DatePicker>
于 2020-04-17T11:06:44.513 回答
1

利用：

dateFormat={"EEEE"}

或者：

dateFormat={"EEE"}

于 2020-11-17T08:53:15.520 回答
0

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

<DatePicker
dateFormat="ddd"
onChange={this.handleChange} />
于 2019-06-14T19:49:34.097 回答
0

DayPicker 允许您使用weekdayElement道具传递一周中的几天的自定义元素。因此，您可以创建一个Weekday元素，使用formatWeekdayLongreact-day-picker utils 中的方法将名称转换为长名称，然后将该名称缩减为 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>
  );
};

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

于 2021-10-25T13:05:32.467 回答