使いやすい日付入力を考えて実験して実装して終えて - Qiita

本記事は「DeNA Advent Calendar 2020」の9日目となります。 使いやすい日付入力を目指して取り組んだ開発過程と、そこで得た知見を紹介します。 手間のかかるUI 日付入力はもともとSP(スマートフォン)サイトで使っていましたが、PCサイトでも利用することになりました。 それが今回開発することになったきっかけです。 修正前は、input[type="date"] で実装しており、日付入力時にカレンダーUIが表示されていました。 カレンダーUIは入力に手間がかかるため、PCだけではなくSPも含めて見直すことにしました。 SP PC Demo Code 入力方法の選定 開発する前にどういうUIが日付入力として良いのかを考えました。 思いついたのが「テキスト入力」と「セレクトボックス」です。 「使いやすい＝早く入力できる」と考え、どちらがより早く入力できるかを実験することにしま