【React】react-datepickerを使ってカレンダーを作る

カレンダーを作る

• イメージは
  

• 実装コード

// カレンダーを表示する
//react-datepickerを使って実装
import { useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import ja from "date-fns/locale/ja";
//日本語化
registerLocale("ja", ja);

export const Calendar = () => {
  //初期値は当日
  const initialDate = new Date();
  const [startDate, setStartDate] = useState(initialDate);

  //指定できる日付は31日後まで
  const endDate = new Date(initialDate);
  endDate.setDate(endDate.getDate() + 31);

  console.log("startDate = " + startDate);
  console.log("endDate = " + endDate);
  const handleChange = (date: Date) => {
    setStartDate(date);
  };

  return (
    <div className={"ReservationCalendar"}>
      <p className="dateText">日付:</p>
      <div className="calendar">
        <DatePicker
          locale="ja"
          selected={startDate}
          dateFormatCalendar="yyyy年 MM月"
          dateFormat="yyyy/MM/dd"
          onChange={handleChange}
          minDate={startDate}
          maxDate={endDate}
        />
      </div>
    </div>
  );
};

1. datepickerのインストール
npm install react-datepicker --saveでdatepickerをインストールします

2. 日本語化
日本語対応されているので日本語化していきます

今回はwebアプリを開いた日を初期値にしたかったのでnew Date()で設定しました。

DatePickerコンポーネントを呼ぶ際のオプションでlocale="ja"を指定

locale="ja"

3.初期値設定
今回はwebアプリを開いた日を初期値にしたかったのでnew Date()で設定しました。

//初期値は当日
  const initialDate = new Date();
  const [startDate, setStartDate] = useState(initialDate);

4. 範囲指定
今回は当日から31日後まで日付を指定できるようにしました。
31日後を超えるとこんな感じ↓

  //指定できる日付は31日後まで
  const endDate = new Date(initialDate);
  endDate.setDate(endDate.getDate() + 31);

getDateで当日の日付を取ってきて+31日しています。

これをオプションで設定します。

  minDate={startDate}
  maxDate={endDate}

minDateに当日、maxDateに31日後までの日付指定をしています。

5. 日付フォーマット
日本語化してもフォーマットは変わらないのでお好みでフォーマットを変更します

   dateFormatCalendar="yyyy年 MM月"
   dateFormat="yyyy/MM/dd"

以上、簡単に作ることができました！