iPhone で日時を入力する input type 属性

iOS版Safariでフォームから日時を入力する際に、input要素のtype属性を指定することによって、通常のキーボードとは異なる日時入力画面を呼び出すことができます。

例：<input name="birthday" type="date">

iPhone 5（iOS 6.0.1）で試すと、type属性値を「date」などに指定したinput要素は、ページ上ではselect要素のようなポップアップメニューとして表示されますが、メニューをタップして開くと、それぞれ次のように表示されます（サンプル）。

▲type="date"

▲type="datetime"

▲type="datetime-local"

▲type="month"

▲type="time"

Chrome for Androidの場合

ちなみに、Android 4.0.4（Galaxy Nexus SC-04D）で試してみたところ、標準ブラウザでは非対応でしたが、Chromeでは次のように表示されました。

▲type="date"

▲type="datetime"

▲type="datetime-local"

▲type="month"

▲type="time"

iOS 6になって、ウェブ版のGoogle Mapsでルート検索を使ってみて、これらのtype属性に対応していることに気付いたのですが、どうやらiOS 5の時点で、既に対応していたようです。

関連記事

• input タグの type 属性で iPhone のキーボードを切り替える