如何显示星期几的名称

Question

我正在开始 React，我按照教程使用 date-fns 制作日历，但是教程中的 date-fns 版本与我的版本不同。

我在显示星期几的名称时遇到问题。

教程代码（旧版date-fns）：

import dateFns from "date-fns";

renderDays() {
  const dateFormat = "dddd";
  const days = [];
  let startDate = dateFns.startOfWeek(this.state.currentMonth);
  for (let i = 0; i < 7; i++) {
    days.push(
      <div className="col col-center" key={i}>
        {dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
      </div>
    );
  }
  return <div className="days row">{days}</div>;
}

我的代码与新版本的 date-fns :

import { format, startOfWeek, addDays} from 'date-fns';

renderDays() {
    const dateFormat = "dddd";
    const days = [];

    let startDate = startOfWeek(this.state.currentMonth);

    for (let i = 0; i < 7; i++) {
      days.push(
        <div className="col col-center" key={i}>
          {format(addDays(startDate, i), dateFormat)}
        </div>
      );
    }

    return <div className="days row">{days}</div>;
  }

我不明白如何才能让名字出现...目前它显示的是数字。

抱歉，我无法通过图片向您展示每个代码的结果，但这里是教程的link：https://medium.com/@moodydev/create-a-custom-calendar-in-react-3df1bfd0b728

你有什么想法可以帮助我吗？

谢谢

Answer 1

要仅显示星期几，请将 dateFormat 设置为 EEEE。对于其他格式选项，请参阅 date-fns docs

如何显示星期几的名称

How to displays name of days of week

reactjs

jsx

date-fns