こんにちは！withサーバーチームの@10keiと申します。
簡単な入力フォームを作成する際、日付の入力項目には<input type="date">を使うと便利ですよねー。
See the Pen Untitled by KeitoSato (@Keito13) on CodePen.
入力補助のカレンダーもブラウザが用意してくれます。おてがる！😄
ところでこのフォームですが、入力補助のカレンダーを使わずとも、キーボードから直接入力することができます。
生年月日など、現在の日時から離れた年の入力をしたい時は、直接入力した方が早い時もありますね。
さて、では弊社アプリの誕生日（iOS版のリリース日）を試しに入力してみましょうか。
えーと、2016年3⽉29⽇だから、「20160329」っと…
ん？
あぇ！？
201603年！！！？？
年の最大値は9999年じゃない！？
<input type="date">で作成した日付の入力フォームにおいて
年の最大値は9999年ではありません。
なんと、275760年まで入力することが可能です。
JavaScriptなどのDate型と同様に
1970年1月1日から、100,000,000日後までをサポートしているからです。
これはtype="date"に限らず
type="datetime-local"やtype="month"も同様の入力範囲となっています。
ですが、2000年代に生きる我々にとって、年月日の入力は通常8桁で完結するものであり
4桁入力した時点で年の入力を終え、月の入力に自ずと移ってくれると思うのが自然です。
年に6桁の入力ができてしまうと
ユーザーの入力ミスを誘ってしまうUIだと言えるでしょう。
RDBMSのDATE型サポート範囲にも注意！
さらに厄介なことに、RDBMSによってはDATE型のサポート範囲が9999-12-31までとなっています。
- DATE型サポート範囲が
9999-12-31までの主要RDBMS - DATE型サポート範囲が
9999-12-31ではない主要RDBMS
ユーザーに入力させた日付フォームの値をそのまま保存するシステムだった場合、使用しているRDBMSによっては
年に6桁の入力ができてしまうことで、入力ミスの誘発だけでなく
エラーまで発生させてしまう要因となり得ます。
max属性で入力の最大値を設定してあげよう
日付の入力を受け取る際、サーバー側で値のバリデーションを確実に行い、予期せぬエラーを防ぐ様にしましょう！
また、そもそも年に入力できる値の範囲を制限し、入力ミスを防いであげれば、よりユーザーフレンドリーなフォームになりますね。
こんな時はmax属性を付与してあげると良いでしょう！
サービスによって、入力が想定される最大の日付をmaxに設定するのが理想ですが
特に思い当たる日付がなければ、9999-12-31をとりあえず最大値にしてあげれば
年に5桁以上の桁数が入力されることは防ぐことができます。1
ちなみに、pattern属性はdateなどの型においては無効になりますので
こちらではユーザーの入力制御を行うことはできません。注意！2
See the Pen Untitled by KeitoSato (@Keito13) on CodePen.
<input type="date">を使って日付の入力項目を作成する際は、最大値を忘れずに設定しましょう！
参考
-
Chromeではキーボード入力でも、max属性で設定した日付までの入力に制限してくれますが、Firefox, Safariでは
275760-12-31まで入力が出来てしまいます（ただし、maxに設定した日付を超えた入力がされていると:invalidにはなってくれる） ↩ -
現在ではあまり意識する必要はないと思いますが、date型のinput要素に対応していないブラウザの対応のために、pattern属性をつけることもあったようです。(ブラウザーの互換性の扱い - MDN) ↩