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

本記事で扱う内容

Reactのdate-pickerの各種オプションの設定方法について説明します。

• 選択できる最小、最大日付の指定
• 日付範囲の選択
• 選択不可の日付の指定

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

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

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

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>
  );
}

表示例

日付範囲の選択

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

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

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

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>
  );
}

表示例

選択不可の日付の指定

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

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

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>
  );
}

表示例

参考文献

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