React date-picker 日付範囲の指定について

# 本記事で扱う内容
Reactのdate-pickerの各種オプションの設定方法について説明します。
- 選択できる最小、最大日付の指定
- 日付範囲の選択
- 選択不可の日付の指定

## 選択できる最小、最大日付の指定

- `minDate`：選択できる最小日付
- `maxDate`：選択できる最大日付

以下のコードは、今日の日付を`minDate`に、明日の日付を`maxDate`に設定している。

```React:App.js
import React, { useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import ja from "date-fns/locale/ja";
import "react-datepicker/dist/react-datepicker.css";

// 日本語ロケールを登録
registerLocale("ja", ja);

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 1); //明日の日付

  const handleDateChange = (date) => {
    setStartDate(date);
  };

  return (
    <div className="App">
      <div className="datepicker">
        <DatePicker
          locale="ja"
          selected={startDate}
          onChange={handleDateChange}
          dateFormatCalendar="yyyy年 MM月"
          dateFormat="yyyy/MM/dd"
          minDate={minDate}
          maxDate={maxDate}
          isClearable
          placeholderText=""
        />
      </div>
    </div>
  );
}

```
### 表示例
![Screenshot 2024-07-15 at 11.06.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832914/a8526a72-b7fc-faec-e19c-5466d1319fb0.png)

## 日付範囲の選択
- `startDate` : 選択する日付範囲の開始日
- `endDate` : 選択する日付範囲の終了日
- `selectsRange` : 日付範囲の選択を有効に

以下のコードは、日付範囲の選択を有効にし、選択した値は`handleDateChange`でそれぞれの変数に格納している。

:::note warn
`date[0]`が日付範囲の開始日、`date[1]`が日付範囲の終了日となる。
:::

```React:App.js
import React, { useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import ja from "date-fns/locale/ja";
import "react-datepicker/dist/react-datepicker.css";

// 日本語ロケールを登録
registerLocale("ja", ja);

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 30); //30日後の日付

  const handleDateChange = (date) => {
    setStartDate(date[0]);
    setEndDate(date[1]);
  };

  return (
    <div className="App">
      <div className="datepicker">
        <DatePicker
          locale="ja"
          selected={startDate}
          onChange={handleDateChange}
          dateFormatCalendar="yyyy年 MM月"
          dateFormat="yyyy/MM/dd"
          minDate={minDate}
          maxDate={maxDate}
          startDate={startDate}
          endDate={endDate}
          selectsRange
          isClearable
          placeholderText=""
        />
      </div>
    </div>
  );
}

```

### 表示例
![Screenshot 2024-07-15 at 11.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832914/85cbef78-94d7-f58d-c197-20d72a94d18e.png)


# 選択不可の日付の指定

- `excludeDates` : 日付の配列を渡すことで選択不可な日付を指定する。

例えば、以下のように月曜日以外は選択できないようにすることができる。

```React:App.js
import React, { useState, useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import ja from "date-fns/locale/ja";
import "react-datepicker/dist/react-datepicker.css";

// 日本語ロケールを登録
registerLocale("ja", ja);

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [excludeDates, setExcludeDates] = useState([]);
  const minDate = new Date();
  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 30); //明日の日付

  const handleDateChange = (date) => {
    setStartDate(date);
  };

  useEffect(() => {
    makeDateArr();
  }, []);

  //カレンダーで表示しない日を設定
  const makeDateArr = () => {
    const dates = [];
    // 30日間の日付を生成
    for (let i = 0; i < 32; i++) {
      let currentDate = new Date();
      currentDate.setDate(currentDate.getDate() + i);

      // 月曜日以外の日付を配列に格納
      if (currentDate.getDay() !== 1) {
        dates.push(new Date(currentDate));
      }
    }

    setExcludeDates(dates);
  }

  return (
    <div className="App">
      <div className="datepicker">
        <DatePicker
          locale="ja"
          selected={startDate}
          onChange={handleDateChange}
          dateFormatCalendar="yyyy年 MM月"
          dateFormat="yyyy/MM/dd"
          excludeDates={excludeDates}
          minDate={minDate}
          maxDate={maxDate}
          isClearable
          placeholderText=""
        />
      </div>
    </div>
  );
}
```

### 表示例
![Screenshot 2024-07-15 at 12.03.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832914/123956f1-a6b7-848a-3cef-89b52d26f45e.png)


## 参考文献
詳細は公式で提供するExamplesを参考すること。

https://reactdatepicker.com