Skip to content

Instantly share code, notes, and snippets.

@hrdtbs
Last active September 26, 2020 09:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hrdtbs/154fa2a8be0c190c2455f4226eb2ba49 to your computer and use it in GitHub Desktop.
Save hrdtbs/154fa2a8be0c190c2455f4226eb2ba49 to your computer and use it in GitHub Desktop.
生年月日のInputの実装パターンについて(2020/09時点)

実装パターンとして3つ候補がある

  1. type=dateを用いる
  2. 入力毎に値を決まった形式にfixしていく
  3. 年・月・日でInputを区切る

他にもあれば追記


type=dateを用いる

Pros

  • 雑に実装できる
  • 環境依存ではあるがリッチなUIを利用できる
  • uncontrolledで値を管理できる

Cons

  • PCのSafariでサポートされていない
  • 環境によって操作方法が異なる
  • 入力方法がユーザーにとって自明化は分からない
  • 返り値が環境依存(yyyy-mm-dd、mm-dd-yyyy他)

PCのSafariでサポートされていない についてはpolyfillを用いたり、環境を判定して差し替えることで対応できる(jQuery時代によくやっている人がいた)

入力毎に値を決まった形式にfixしていく

201902という入力に対して2019-02-を返すような実装

Pros

  • 開発者が雑にInputを一つ配置すればできるので、一旦作ってしまえば楽(既に歴史あるライブラリが複数存在)
  • 環境による差異をなくせる
  • 任意のリッチなUIを提供できる
  • ライブラリを使えば、多言語対応が楽

Cons

  • ライブラリを使用しない場合、実装が大変
  • uncontrolledにほぼできない(onBlurなどで管理する実装もあるがユーザー体験が最悪では?)
  • 実装によって細かな操作方法が変わり、入力方法がユーザーにとって自明でなくなる可能性が高い

昔からあるReactのFormライブラリはこの形式が多いように思う。一時期のUXよりDXを優先する風潮が影響している気がする。

年・月・日でInputを区切る

Pros

  • uncontrolledで値を管理できる
  • ただのtype=textのinputなので軽い
  • ユーザーにとって入力方法が自明
  • 多言語対応が楽

Cons

  • リッチなUIは提供しようとすると面倒
  • 値の管理が煩雑になる(3つで一つのコンポーネントとして作ってしまえば解消できる)

Twitterはこれ。ただしモバイルでは文字入力ではなく上下にスワイプして年月日を選択させるようにして、ユーザーの手間を減らしている。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment