Microsoft Edge が <input type="date"> 等に対応

Windows 10 に搭載される新ブラウザ Microsoft Edge ですが、現在公開されている Build 10130 では <input type="date"> 等の日付関連のデータ型に対応していることを確認しました。一方、 type="time" など時刻が関わるものは現時点では対応されていないようです。

"date", "time" などの日付/時刻関連コントロールは、PC版ブラウザだと Chrome, Opera, Vivaldi などが対応しており、モバイルでも iOS Safari, Android 標準ブラウザ, Android 版 Firefox などほとんどのブラウザが対応しています（ただし Android 標準ブラウザは 4.4系 以降の対応なので、 4.2系 など未対応の環境もまだ多い状況です）。 主要なブラウザの対応状況を下表にまとめました。

ブラウザ	HTML5		HTML 5.1			HTML Standard
	date	time	month	week	datetime	datetime-local
Firefox 38	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応
Chrome 43	○ 対応	○ 対応	○ 対応	○ 対応	× 未対応	○ 対応
Opera 29	○ 対応	○ 対応	○ 対応	○ 対応	× 未対応	○ 対応
Vivaldi 1.0.162.9	○ 対応	○ 対応	○ 対応	○ 対応	× 未対応	○ 対応
Edge (Project Spartan) 15.10130	○ 対応	× 未対応	○ 対応	○ 対応	× 未対応	× 未対応
Internet Explorer 11	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応
Safari 8	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応	× 未対応
iOS Safari 8	○ 対応	○ 対応	○ 対応	操作不能	× 未対応	○ 対応
Android版 Firefox 38	○ 対応	○ 対応	○ 対応	○ 対応	○ 対応	○ 対応
Android版 Chrome 43	○ 対応	○ 対応	○ 対応	○ 対応	× 未対応	○ 対応

このように、PC環境ではまだ対応していないブラウザも多い状況なので、しばらくは何らかの救済策が必要となります。

select要素を使って年月日それぞれのプルダウンを生成したり、 JavaScript で独自のカレンダーを作ることもできますが、とくにモバイル環境での入力のしやすさを考慮すると、対応しているブラウザはデフォルトの機能を提供するのが良いケースも多いと思われます。その場合は JavaScript での判定処理が必要になりますが、 type="date" を例にしたコード例を挙げます。

var inputDate = document.createElement('input');
inputDate.setAttribute('type', 'date');
if (inputDate.type === 'date') {
  // 対応
} else {
  // 未対応
}

しかし、この判定は古い Android 標準ブラウザで誤判定を起こすので、こうしたほうが良いでしょう。

var support = false; // ブラウザが type="date" をサポートしているか

var inputDate = document.createElement('input');
inputDate.setAttribute('type', 'date');
if (inputDate.type === 'date') {
  inputDate.value = 'LoVE・Me・Do'; // 有効でない値を代入する（文字列は何でもいいです）
  if (inputDate.value === "") {
    // サポートブラウザは値を空にする（はず）
    support = true;
  }
}

if (support) {
  // 対応
} else {
  // 未対応
}

value に有効でない文字列を代入して空文字列になるか否かを調べる方法は HTML 仕様に則ったもので、type="date" の項目には以下のような記述があります（"date"以外のタイプにも、細かい文言は異なるものの不正な場合は空にする旨の記述があります）。

The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.