Reactで日付の範囲選択ができるカレンダーComponentを作成する方法(react-datepickerを使用)

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Reactで日付の範囲選択ができるカレンダーComponentを作成する方法について、解説します。

日付の範囲選択ができるカレンダーを作る

react-datepickerというライブラリを使って、次の画像のような日付の範囲選択ができるカレンダー・Componentを作っていきます。

react-datepickerのinstall

まずは、react-datepickerをinstallします。

yarn add react-datepicker

# または、、、

npm install react-datepicker

TypeScriptを使用している場合は、型定義ファイルもあるので、installします。

yarn add --dev @types/react-datepicker

# または、、、

npm i --save-dev @types/react-datepicker

https://www.npmjs.com/package/@types/react-datepicker

日付の範囲選択ができるカレンダーのSampleCode

日付の範囲選択ができるカレンダーのSampleCodeは、次のとおりです。

このSample Componentを使用すると、冒頭の画像のような範囲指定・カレンダーが表示できます。

SelectRangeCalender.tsx

import DatePicker from "react-datepicker";
// react-datepicker 専用の CSS を読み込む: これを読み込まないとカレンダーが正しく表示されない
import "react-datepicker/dist/react-datepicker.css";
import { useState } from "react";

const SelectRangeCalender = () => {
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [start, end] = dateRange;

  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      <DatePicker
        selectsRange={true}
        startDate={start}
        endDate={end}
        onChange={(dates: [Date | null, Date | null]) => {
          setDateRange(dates);
        }}
        isClearable={true}
      />
    </div>
  );
};

export default SelectRangeCalender;

注意点として、import "react-datepicker/dist/react-datepicker.css";で、react-datepicker専用のCSSファイルを読み込む必要があります。
これを読み込まないと、次の画像のようにカレンダーのStyleが崩れて、正しく表示されません。

まとめ

カレンダーComponentは、何かと使うと思うので、今回作ってみてよかったです。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://zenn.dev/manase/scraps/caa5600dea4035

https://zenn.dev/manase/scraps/281c83a3d644d6

https://hypeserver.github.io/react-date-range/