2018年3月3日土曜日

各ブラウザにおけるinput要素date型（<input type="date">）の表示

3月 03, 2018

オフィス狛　技術部です。

一昔前は、Webシステムのカレンダー入力フォームと言えば、jQuery UI Datepicker が定番でした。
HTML5が使われ始めてからは、新たに追加された input要素のdate型（<input type="date">）を使う事が増えてきました。
ただ、ブラウザによって表示が微妙に異なるので、毎度問い合わせが発生します。今回、備忘録も兼ねて、各ブラウザでどう表示されるかまとめてみました。

※（2019/07/03 修正：画像リンクがきれていたので、画像リンクを更新しました。このタイミングで、全ブラウザ最新の状態でキャプチャを撮り直しています。）

※ （2021/06/23 修正：Safariでの<input type="date">の表示が変更されていましたので、キャプチャと説明を更新しました。）

・初期値無し（<input type="date" value="">）

Internet Explorer 11

IEでは、<input type="text"> と同様の表示になります。

Microsoft Edge

初期値無しの場合、「yyyy/mm/dd」と表示されます。
ドラム式のUIで、日付を選択します。

Google Chrome（Windows）

初期値無しの場合、「年/月/日」と表示されます。
カレンダーUIで、日付を選択します。

Firefox（Windows）

初期値無しの場合、「yyyy/mm/dd」と表示されます。
カレンダーUIで、日付を選択します。

Google Chrome（Mac）

初期値無しの場合、「年/月/日」と表示されます。
カレンダーUIで、日付を選択します。

Firefox（Mac）

初期値無しの場合、「yyyy/mm/dd」と表示されます。
カレンダーUIで、日付を選択します。

Safari（Mac）

初期値無しの場合、表示した当日の日付が「yyyy/mm/dd」形式で表示されます。

カレンダーUIで、日付を選択します。

・初期値有り（<input type="date" value="2018-01-01">）

初期値の設定は value に表示したい日付を入力する。
※value の形式は yyyy-mm-dd である必要があります。
初期値無しの表示形式が yyyy/mm/dd となっていますが、実際に value に yyyy/mm/dd 形式で設定しても表示されません。
また、存在しない日付を value に入力しても初期値として設定されません。

Internet Explorer 11