うならぼ

申し訳程度のアフィリエイトとか広告とか解析とかは/aboutを参照

input[type=date]で指定できる日付の上限

Chromeでこんな風に表示されるやつです。

f:id:unarist:20150526123402p:plain

キーボードから入力するときは、十分な桁数を入力することで次のフィールドにカーソルが移動します。月のところで 05 って入力するとか。

じゃあ年のところには 2015 って入れればいいんでしょ?と思うと、そうはいかない。6桁入力してやっと移動する。

なぜ6桁?

これは Date 型の最大値と一致するようです。HTML5の標準を読んでも値域についての記述が見つからなかったので、見た感じそうだとしか言えないのですが…valueAsDateというIDL属性があるので、まあありそうな話ではあります。

Date型の最大値は

The actual range of times supported by ECMAScript Date objects is slightly smaller: exactly –100,000,000 days to 100,000,000 days measured relative to midnight at the beginning of 01 January, 1970 UTC. This gives a range of 8,640,000,000,000,000 milliseconds to either side of 01 January, 1970 UTC.

ECMA-262 5.1 §15.9.1.1

つまり 275760年9月13日 なので、input 要素の挙動と合いますね。

「27万年も運用する予定ないんだけど」

ですよね。4桁入力したら次のフィールドに移動してほしいです。

これを実現するには、max 属性に4桁年を入れてやればよいです。

<input type="date" max="9999-12-31" />

maxなし

maxあり

なお、input[type=date] は今のところChrome系しか対応してないのであしからず。 時は流れた。