Open1

reactでhabit trackerアプリを作ろう

YujiYuji

Day.jsを使って1週間分の日付を表示させる!

実装コード

  const weekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
  const today = dayjs();
  const startDayOfWeek = today.startOf("week");

...
// 以下でループを行う
{weekDays.map((weekDay, index) => (
  <StatusDay key={index}>
    <p>{weekDay}</p>
    <p>{startDayOfWeek.add(index, "d").format("D")}</p>
  </StatusDay>
))}

フォーマット

参考記事
https://day.js.org/docs/en/display/format

上記の記事を参考にしながら組み込みのformat()関数の引数に指定の文字列を投げてあげる