日付や時刻の入力にDatepickerやDatetimepickerを使うのはやめよう

2020年11月25日

2020年現在のスクラッチ開発案件でも、日付や時刻の入力にDatepickerやDatetimepickerを使っているところがあるようです

ですが、HTML5で追加された新たなinput typeを使えば、そういうプラグインがなくても日付選択部品を表示することができます。

<input type="date"> 日付のみ

<input type="time"> 時刻のみ

<input type="datetime-local">　日付時刻

ただし、ChromeやEdge、Safariなど対応ブラウザがまだ限られています。Chromeだけ対象にするということなら、ぜひ上記inputを使用することを第1に検討したいですね。

DatePickerを顧客提案するのは、
そういうのがあるのを知ってていい感じだと思ってたから
という理由だと思います。

顧客はカレンダーで選択させてくれと言ってるわけではありません。手打ちしたくないだけです。（手打ちでもいいという顧客も多いはず。でも、ハイフンやすらっしゅでくぎらせるのはきついかも）

カレンダーを表示したいと言ってるわけではないので、input typeで対応できれば最善です。

JQueryを入れる手間も、data-toggleを書く手間も、input typeをdatepickerで初期化する手間も省けます。ソースコード（HTML）をシンプルに保つことができて、とてもいい気分になります。

datepickerを各画面に組み込むことは、難しくはないですが、組み込む人によって差が出てしまうものです。そういう微妙な差異が保守しにくさに繋がります。

そうならないために、これからUIをデザインするポジションの人は、ぜひinput type=date or timeをまず提案して欲しいと思います。