実装パターンとして3つ候補がある
- type=dateを用いる
- 入力毎に値を決まった形式にfixしていく
- 年・月・日でInputを区切る
他にもあれば追記
- 雑に実装できる
- 環境依存ではあるがリッチなUIを利用できる
- uncontrolledで値を管理できる
- PCのSafariでサポートされていない
- 環境によって操作方法が異なる
- 入力方法がユーザーにとって自明化は分からない
- 返り値が環境依存(yyyy-mm-dd、mm-dd-yyyy他)
PCのSafariでサポートされていない についてはpolyfillを用いたり、環境を判定して差し替えることで対応できる(jQuery時代によくやっている人がいた)
201902
という入力に対して2019-02-
を返すような実装
- 開発者が雑にInputを一つ配置すればできるので、一旦作ってしまえば楽(既に歴史あるライブラリが複数存在)
- 環境による差異をなくせる
- 任意のリッチなUIを提供できる
- ライブラリを使えば、多言語対応が楽
- ライブラリを使用しない場合、実装が大変
- uncontrolledにほぼできない(onBlurなどで管理する実装もあるがユーザー体験が最悪では?)
- 実装によって細かな操作方法が変わり、入力方法がユーザーにとって自明でなくなる可能性が高い
昔からあるReactのFormライブラリはこの形式が多いように思う。一時期のUXよりDXを優先する風潮が影響している気がする。
- uncontrolledで値を管理できる
- ただのtype=textのinputなので軽い
- ユーザーにとって入力方法が自明
- 多言語対応が楽
- リッチなUIは提供しようとすると面倒
- 値の管理が煩雑になる(3つで一つのコンポーネントとして作ってしまえば解消できる)
Twitterはこれ。ただしモバイルでは文字入力ではなく上下にスワイプして年月日を選択させるようにして、ユーザーの手間を減らしている。