🤫

<input type="date">のイマイチなところ

2020/11/14に公開

CSS

HTML

アクセシビリティ

tech

概要

フロントエンドに関わる人なら、日付入力に一度は悩んだことがあると思いますが、この記事ではその話をします。input要素のtype="date"入力型のかゆいところへの手の届かなさを語っていきます。

date型の入力欄とは？

<input type="date" id="birthday" name="birthday"
       value="2018-07-22"
       min="1900-01-01" max="2020-12-31">

これだけのHTMLを書くだけで、日付を入力するウィジェットを生成してくれます。一見便利そうに見えるのですが、実は多くの落とし穴が存在します。

date型の入力欄が持つ落とし穴

対応していないブラウザがある。
ブラウザによってUIが大きく異なる。
年の入力がしにくい。

落とし穴というよりも、「癖が強い」という表現の方が正しいのかもしれませんが、1つ1つ触れていきます。

対応していないブラウザがある

参考: https://caniuse.com/input-datetime

IE11とMacOSのSafari(ver14時点）が対応していません。未対応のブラウザではtype="text"入力型と同等の要素になってしまいます。IE11はサポート対象から外す選択肢が取れますが、Safariはそうもいきません。

iOS Safariの対応状況

ちなみにiOS Safariは対応が完全ではありません。（※iOS Safari 14時点）

date型の入力欄にはmin max step という追加で指定可能な属性があります。入力値やフォームの挙動の制限ができる属性ですが、iOS Safariでは指定が無効になります。

ブラウザによってUIが大きく異なる

フォームをデザインする際はプロダクトのトンマナに合わせたい時に困るのがこれです。ChromeとFirefoxで見た目が変わるなら理解できますが、iOS Safariの場合はバージョンごとに大きな変化があります。

参考（同僚の方のスライドです）: https://speakerdeck.com/otukutun/nian-yue-ri-falseru-li-dousiyou?slide=15

また、CSSでのカスタマイズ可能な範囲も限定的であり、ブラウザごとにプロパティの指定方法が違います。date型の入力欄のカスタマイズは考えないことをおすすめします。

年の入力がしにくい

date型の入力欄を作ってみたところ、実際に使ってくれた人からのフィードバックとして多かったのがこれでした。

これはAndroid Chromeのキャプチャーですが、年をどこから編集するのか分からない人も多いのではないでしょうか？「自分の誕生日を入力するために月単位で何度もスワイプしなければいけなくて不便」というフィードバックをもらい、僕はハッとなりました。当月の予定調整をするのが目的であれば、このUIでも問題はないと思います。しかし、誕生日を入力してもらうUIには不向きだと言わざるをえません。

最適解は何なのか？

かゆいところに手が届くライブラリを探す。
セレクトボックスで実装する。

一番確実なのは、「セレクトボックスで実装する」だと思います。

参考: https://speakerdeck.com/otukutun/nian-yue-ri-falseru-li-dousiyou

フレームワークとの親和性だったり、デザイン面だったりで話が変わってくるケースもあるかもしれませんが、年月日をセレクトボックスで入力してもらうUIにするのが確実だと現時点では思っています。

セレクトボックスは入力値の制御がしやすいですし、デザインのカスタマイズもそれなりの自由度があります。ブラウザによって見た目に差があるのは事実ですが、固有のCSSをリセットするテクニックは確立されているので実装で困ることはあまりないでしょう。

かゆいところに手が届くライブラリを探す

ここは各々が使っているフレームワークへの依存が大きいので、一概には言えないです。

個人的に良いと感じているのはAngularのdatepickerですが、言うまでもなくAngularを使っているプロジェクトでない場合は導入できないのがネックです。

まとめ

繰り返しますが、年月日の入力はセレクトボックスで実装するのが確実です。ブラウザごとの差分吸収に時間を使いたくないので、当面はセレクトボックスで戦っていくつもりです。

「オレ、最強のDatepicker知ってるよ？」って人は、~~僕にだけ~~こっそり教えてください。