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

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

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

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

を使います。

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

Download Links – “Stable” Version内の

を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をカスタマイズ-その２

posted with amazlet at 12.09.06

西畑一馬鍋坂理恵
アスキー・メディアワークス
売り上げランキング: 4062