react-dates を Material-UI の DatePicker っぽくカスタマイズしてみました。
Material-UI の DatePicker は日付の範囲を指定する機能を持っていません(2020/09/16 時点での最新 ver - v3.2.10 では)。そのため、日付範囲の指定が機能として必要な場合は、他の DatePicker ライブラリを使用する必要があります。ただ、他のライブラリを使用することによって、デザインの統一性が崩れてしまうという悩みが発生します。
今回は、react-dates という DatePicker ライブラリをカスタマイズすることで、この辺の悩みを解決できないかチャレンジしてみました。結果そこそこ良い感じになった気がします。
ちなみに、Material-UI の DatePicker は v4 が開発途中であり、日付範囲を指定できる DatePicker が追加される予定みたいです。公式ドキュメントの方で Demo が公開されていて触ることができます。早くリリースされて欲しいなあ。
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.6
BuildVersion: 19G2021
$ node --version
v12.18.2
$ npm --version
6.14.5
$ yarn --version
1.22.4
$ npm list --global --depth=0
...
├── [email protected]
...
$ yarn list --depth=0
...
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
...
$ yarn install
$ yarn start