標準UIでらくらくDatepicker生活

2021年6月29日 17:36

こんにちは、フロントエンドエンジニアの柴山です！突然ですがみなさん、Datepicker使ってますか？日付入力に利用するカレンダーUIですが、曜日や閏年の考慮などかなり複雑なUIですよね。品質確保や工数削減のためUIライブラリを利用してるチームも多いのではないのでしょうか。
スペースマーケットでもDatepickerを含むUIはライブラリを利用していましたが、node_modulesの肥大化、レンダリング速度低下などの問題から、一部ページにおいてライブラリから脱却する方針になりました。ある程度のUIは自前で作れそうだな、でもカレンダーは鬼門……と悩んでいたところに出会ったのが標準UIのDatepickerだったのです。

標準UI Datepickerとは？

ボタンやリンク、チェックボックスなど、スタイリングやロジックを書かずにHTMLだけで実現できるパーツは数多くあります。それらと同様に、外部ライブラリを導入することなくブラウザの標準UIでDatepicker機能が利用できるのです。これはかなり便利な上、コードも超シンプル！どれくらいシンプルかというと、最低限のpropsを渡して一行。そして描画されるコンポーネントがこちら。

<input type="date" />

UIライブラリの選定や初期設定の時間もなく、簡単にDatepickerが描画できました。もちろん曜日や閏年の設定も完備です。

ブラウザによるUIの違い

上記であげたUIはchromeの例です。標準UI故の問題というべきか、ブラウザ毎にDatepickerのデザインは異なります。

Mac chrome

Mac safari

Windows Microsoft Edge

Windows firefox

iPhone safari

Android chrome

並べてみるとだいぶUIに差がありますね。日付選択の操作も日をクリックする場合と、日を選択した上で設定やOKなどをクリックする場合などまちまち。これらのデザインや挙動は外部から変更できないため、残念ながら各OS/各ブラウザでカレンダーを統一したい場合には不向きです。

Datepickerが提供する機能

Datepickerには日付のバリデーションなどいくつかの機能が標準で備わっています。いずれもpropsで設定値を渡すだけなので、こちらも実装としては非常にシンプルです

一つ目および二つ目は選択可能な日付の範囲を示すmin、maxです。minは選択可能な日付の開始日、maxは終了日です。いずれもYYYY-MM-DD形式で与える必要があります。
以下は7月1日から7月10日をmin,maxに指定した例です。選択可能な日付以外はグレーアウトされていることがわかります。

<input type="date" min="2021-07-01" max="2021-07-10" />

三つ目は、選択可能な日付の刻み間隔を示すstepです。valueまたはminを基準として、stepで指定された日数を飛ばして選択可能日を指定することができます。（難しい…）
例えば7月の毎週日曜日を選択可能としたい場合は、minに7月第一週の日曜日を、maxに7月最終日を、stepに7を指定します。

<input type="date" min="2021-07-04" max="2021-07-31" step="7" />

stepの型がstring | number であり、Arrayが許容されていないことから、複数の刻み間隔が指定できないとわかります。土日だけ、もしくは平日だけ選択可能にしたい、といった要件は残念ながら実現できません。
また、2021年6月現在、safariはstep機能が動作しない様子です。Datepicker自体safariでサポートされたのが割と最近なので機能追従も遅れてる可能性があります。気長に待ちましょう。

そのほかonChangeやreadonly、requiredなど、inputが対応してるイベントや属性にも対応しています。

サポートブラウザ

MDNによるとほとんどの主要ブラウザでDatepickerはサポートされている様子です。ただsafariは2021年4月26日にリリースされたv14.1からサポート対象のため、それ以前のブラウザに関しては別途考慮が必要になります。

引用：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date#browser_compatibility

非サポートブラウザの場合、<input type="date" />はDatepickerではなく、素のinput要素として表示されます。そのため日付入力欄であることを示すため、patternやplaceholderの設定や、選択可能な日付のバリデーションなどを自前で実装する必要があるでしょう。以下は、placeholderで日付の入力を促す例です。

ただ、そういったロジックを実装したくないからこそ標準UIのDatepickerを利用しているはずなので、やや本末転倒な感じも否めませんね…。

まとめ

今回の記事では標準UIで実現するDatepickerを紹介しました。デザインがブラウザに依存したり、未サポートの機能があったりなどのデメリットも存在しますが、シンプルなDatepickerが簡単に実現できるとあれば一度は使用を検討しても良いかなと思います。現在は機能不足で採用できないとしても、今後のアップデートで便利になる可能性もありますので、動向をウォッチングしても損はなさそう！

お知らせ

6月30日（水）の19時から、エンジニアミートアップを開催します！今回はバックエンド・フロントエンド・アプリと盛り沢山の内容になっています。ブログを書いてる今現在も準備真っ最中。開発のさまざまな裏話が聞ける数少ないチャンスなので、興味のある方はぜひご参加ください！

また、弊社では現在バックエンドエンジニアを大募集中です。スペースマーケットのプロダクトやシェアエコに興味のある方、柔軟な働き方をしたい方などなど、ご応募お待ちしております！

この記事が気に入ったらサポートをしてみませんか？