jQuery Mobileプラグイン「Datebox」を活用したスマートフォンサイト作成

「jQuery プラグイン」の利用（16）

その他の日付・時間入力方法

　この他、リスト1の4.「<script src="./plugins/jquery.mobile.datebox.i8n.jp.js"></script>」の部分と、5.「data-options='{"mode": "calbox"}'」の部分を変更することで入力のUIを変更できます。

（1）上下ボタンで日付入力

図2　「jqm-datebox.mode.datebox.min.js」、dateboxパラメータを指定した場合、
上下ボタンで日付入力するポップアップを表示

（2）縦スクロール式で日付入力

図3　「jqm-datebox.mode.flipbox.min.js」、flipboxパラメータを指定した場合、
縦スクロール式UIで日付入力するポップアップを表示

（3）横スクロール式で日付入力

図4　「jqm-datebox.mode.slidebox.min.js」、slideboxパラメータを指定した場合、
横スクロール式UIで日付入力するポップアップを表示

（4）上下ボタンで時間入力

図5　「jqm-datebox.mode.datebox.min.js」、timeboxパラメータを指定した場合、
上下ボタンで時間入力するポップアップを表示

（5）縦スクロール式で時間入力

図6　「jqm-datebox.mode.flipbox.min.js」、timeflipboxパラメータを指定した場合、
縦スクロール式UIで時間入力するポップアップを表示

（6）日・時間・分・秒の数値入力

図7　「jqm-datebox.mode.durationbox.min.js」、durationboxパラメータを指定した場合、
上下ボタンで日・時間・分・秒の数値を入力するポップアップを表示