【React】Date range pickerを実装できるライブラリ「react-dates」

Material UI の Date range picker は Pro Plan でしか使えなかったので、無料で使用できるものを探してたどり着いたのがこちら。
「react-dates」ライブラリです。

GitHub のページはこちら。

react-dates/react-dates: An easily internationalizable, mobile-friendly datepicker library for the web
https://github.com/react-dates/react-dates

インストールコマンドは下記のとおりです。

npm install --save react-dates moment

なお、moment.js は既に導入済みでしたら不要です。

import React, { useState } from 'react';
import moment from 'moment';
import { DateRangePicker } from 'react-dates';

import 'moment/locale/ja';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

export function AppDateRangePicker(props) {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);
  const onChange = (selectStartDate, selectEndDate) => {
    setStartDate(selectStartDate);
    setEndDate(selectEndDate);
  }
  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="startDateId"
      endDate={endDate}
      endDateId="endDateId"
      focusedInput={focusedInput}
      onFocusChange={setFocusedInput}
      onDatesChange={onChange}
    />
  );
}

サンプルコードは下記のとおりです。
とりあえず、一番シンプルな書き方です。
こちらは入力欄と Picker 部分が一体化したものですが、<DayPickerRangeController> を使えば Picker のカレンダー部分のみを表示することもできます。
これと任意の入力欄、例えば Material UI の <TextField> を使えば、ほかの入力欄と見た目をそろえることもできます。
こちらについては、GitHub のページに説明が載っていますので、こちらをご参照ください。

以上、React で Date range picker を実装できるライブラリ「react-dates」のご紹介でした。
ご参考になれば幸いです。