HTML5フォームとdate input型 (その1)
Peter-Paul Kochの運営するサイトQuirksMode.orgに、HTML5のinput要素に関する互換性テーブルが追加されています。
デスクトップでは対応状況にばらつきが、モバイルにおいては対応が進んでいない印象を受けます。
さて、記事中でも触れられていますが、今回は<input type=date>といった、時間に関連するinput要素の型についてとりあげようと思います。
HTML5では、時間に関連する6つのinput型が追加されています。
これらの型に充分なかたちで対応するのはOperaです。HTML5のフォーム仕様の漸進であるWeb Forms 2を提案した経緯もあり、古くから多くの新しいinput型に対応しています。
Operaでは<input type=date>な要素をクリックすると、デートピッカーが表示されるようになっています。
不明な値はtext型として扱われる
さて、時間関連の型に対応しないブラウザでは、どういった表示になるのでしょうか。
type属性に理解できない値が入力された場合、UAはそれを無視しtype=textとして扱います。
<input type=foobar>
var input = document.createElement('input');
input.setAttribute('type', 'foobar');
console.log(input.type); // 'text'
上記のコードはtype属性にfoobarという値を設定していますが、foobarは定義されていない（理解できない）型なので、input.typeは'text'を返します。
値のサニタイゼーションで空文字列になることも
時間関連の型をはじめ、input型のいくつかには、value sanitization algorithmという値のサニタイゼーション処理が定義されています。
サニタイゼーションは型によって処理が異なりますが、date型の場合、値はYYYY-MM-DDといった形式（valid date string）でない場合、値が空文字列になってしまいます。
次のように不正な値をvalue属性に記述したとします。
<input type=date value="2011年3月14日">
var dateinput = document.createElement('input');
dateinput.setAttribute('type', 'date');
dateinput.setAttribute('value', '2011年3月14日');
console.log(dateinput.value); // ''
どちらの場合でも、input.valueを取得すると、その値は "2011年3月14日" ではなく "" となります。