2012年11月11日

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の時点で、既に対応していたようです。

関連記事

0 件のコメント: