スマートフォン向けサイトにjQueryMobileのDateBoxを導入する

PC向けサイトではjQueryのDatepickerを導入していたのですが
スマートフォン向けのjQueryMobileではDateBoxがあるようなので、導入してみました。

jQueryMobileのサイトからjQueryのファイルをDLしましょう。
この記事の時点では1.1.1がStableVerでした。
【20140603追記】
1.4.2

DLして解凍したファイルのうち

• jquery.mobile-1.1.1.min.js
• jquery.mobile-1.1.1.min.css
• /images

を使います。

さらにDateBoxのサイトのDownload & UseからファイルをDLします。
この記事の時点で最新版は1.0.1+でした。

Download Links – “Stable” Version内の

• CSS – Required
• Core Methods – Required
• DateBox Mode

をDLします。

jQuery本体も必要ですが、これはGoogleのCDNを利用しました。
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

DLしたファイル郡をこんな感じでHeader内に記述します。
[html]





[/html]

Dateboxを設置したい場所に次のように記述します。
[html][/html]

するとInputの右にボタンがついたフィールドができます

そのボタンをクリックするとDateboxが現れます。

とりあえず設置するところまでできました。

ここまで書いたのですが、もっと素晴らしいサイトを見つけたので、そちらを参考にしたほうがいいです。
jQuery MobileのDateboxをカスタマイズ-その２