iOS版Safariでフォームから日時を入力する際に、input要素の
type属性を指定することによって、通常のキーボードとは異なる日時入力画面を呼び出すことができます。
例:
<input name="birthday" type="date">
iPhone 5(iOS 6.0.1)で試すと、type属性値を「date」などに指定したinput要素は、ページ上ではselect要素のようなポップアップメニューとして表示されますが、メニューをタップして開くと、それぞれ次のように表示されます(
サンプル)。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0nUytX6nZHqP7nblYtTNS75qHJIuTBnvT5ohzmnLnY3cBAu02exotBc0CTmgCv3Dl8ESKevMlpzY6Qhnc0Y-lLNoAbvrdRUt4UwioMM7T-xEKZCz-OScahatGeV4BHzuwIx7lw1h-mGr/s320/date+iphone.PNG) |
▲type="date" |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrQMGYxzLScarrGaA6zd_jIPN3cOugwNMaA4S36dWLsCV9hujWIZyddz9_lAclbuvVAbcrO6s7t9sNzwcoibOXlUKYVqRFkG0Alq9ozYUCkudKBAmgwa8ilzAxDEq7XmfyTLNuMrK_98T/s320/datetime+iphone.PNG) |
▲type="datetime" |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWabItsMzppWarpCwR4EjRUFjcHeTD2XeFXOjTpEzoHqhr35I1oECtDHJ4ADJzzCuqrvvKvCG0aaeRbGCP62OpnV7vUHMIicouTIDxFDiBJ54GGTpl3ihVtPVLayv6r276wOw8bfZeOT_/s320/datetime-local+iphone.PNG) |
▲type="datetime-local" |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYNBsaFokHdOh6jEDAc2Dh80SIkSCjiV-B6y_mcBU7KClf8ZNqRivTjttRro5IdLrZ_iL_skXUlFK014Nehur_HKQcpIf46rk6Ardu-27N11mjghITOBfzrk33fuRshbmzXtG37q30aA_/s320/month+iphone.PNG) |
▲type="month" |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzT23CYGySIzCR1xgZY-1qohl1pM8_0HiXvGSBkYpk8ezBpt4FfYJMcFzajFSgsqTF555OQWusPm10wNvOxJCPWVmrsKbq99g7z9uSjFsHxSaStt28dFDyXFKapxwdNq0Bylv4n6USLqC/s320/time+iphone.PNG) |
▲type="time" |
Chrome for Androidの場合
ちなみに、Android 4.0.4(Galaxy Nexus SC-04D)で試してみたところ、標準ブラウザでは非対応でしたが、Chromeでは次のように表示されました。
![日付設定 日付設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsK2hoxDggcrkZa_zKE2qUJwtyRTqubGpi60jHJnzEXVCkzL8rxWBgnLppZtbJkHaGBls-jJpg_TvW_zjweVUmhz2EsCL9Yh25PJD-mp0cqFhZM8de-jV6Mx56ffHG1AJ91YLJtFoFDLI/s320/date+android.png) |
▲type="date" |
![日時の設定 日時の設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKIu1-uj9-tmKF0c3pHefcLkTPs2AYfuOIFNS03LxceUgObCkdRSUJRbwYKzbGstzLx7jbna9PgxOWMA6XQVUfgxbIIktTJjwsvi4fdbJWMHyiqgd0K1HpFCMwgiqsrQCHyNoAzDxpcU2/s320/datetime+android.png) |
▲type="datetime" |
![日時の設定 日時の設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkjNO6vY54Yl1bB4t0M457S-7laQwZZXmKu-UJG1vPnhXpKSY22KNHQRZ3IRcABlbzmBnEY0VLx1mByUVOB6mAo9QgSXUzTJIbxKia_Alsou0VpZHfGWkbiTsZPaUTJrBhULuL62NYt4gU/s320/datetime-local+android.png) |
▲type="datetime-local" |
![月の設定 月の設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmEGXabKDecwPZaHaH-6Nm7fv8knfVNQzn30b4BPvLprpQyWZHUR88TTBycKmLi-bGeTBnMenlI2gdZAMk1TxvpbAQvlBjR4XHxUvFVN1twvXnjzXAoNUH3TTT8tmHd8Y8pOOVGM_-XEb/s320/month+android.png) |
▲type="month" |
![時刻の設定 時刻の設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKUkxB0CL_cGAGU12r-jqhraWvXbt4rCaPeKbRQ1agoL33sHcGZMW8FJb4i9CFL8Sm-O-NZf9ylajMMm8gp5DyYoK7XapGlTqMPTErTt3OHF3zPCaYRKb-OUheQTPUEQfwdCrTUN61u3r/s320/time+android.png) |
▲type="time" |
iOS 6になって、ウェブ版のGoogle Mapsでルート検索を使ってみて、これらのtype属性に対応していることに気付いたのですが、どうやらiOS 5の時点で、既に対応していたようです。
関連記事
0 件のコメント:
コメントを投稿