こんにちは。でぃろです。
今回はReactのTipsです。
カレンダーで予約が入ってる日を狙って日付の指定をしたかったので、react-datepickerで予約が入っている日だけを強調表示するように設定を入れました。
その方法を簡単にメモしておきます。
背景と課題
別記事で話題にした乗り合いバス予約システムで予約情報を確認する要件がありました。そのためにカレンダーで日付を選ぶようにすることがUXとしては適切と思ったのでDatepickerを採用しました。
ただ予約は毎日入るわけではないので、予約が入っている日だけを確認したいと思うと、予約情報を探す（予約のはいっている日を特定する）のが難しかったのです。
そこで、カレンダーで予約が入っている日だけを強調表示したくなりました。
解決方法
Reactを使っていたので、使うライブラリは自然とこちらを使うことにしていました。
上記の通りに採用したreact-datepickerにはhighlightDatesという属性があり、これに強調表示したいDateの配列を渡せば、任意の日付を強調することが可能でした。
公式ドキュメントはコチラ。実装した結果は以下のとおりです。
上記はDatepickerのデザインを一つもいじらずに作成した場合です。
コチラを見ると、強調表示のスタイルをカスタマイズできるようです。アプリのデザインや要件によっては必要なのではないでしょうか。
まとめ
今回は簡単にReact Datepickerに対して、特定の日付の強調表示の設定の入れ方をご紹介しました。
ただ、この設定値には日付が何個まで指定可能なのかなどの細かい調査はできていないので、今後それに関連する要件があれば記事を追加していきたいと思います。
