jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-

スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います。
そんな時に便利なプラグインDateBoxについてメモっておきます。

　DateBoxプラグイン

カレンダーを表示させるプラグインは、いくつか存在します。
今回は、その中からjQueryMobile対応のDateBoxを利用してみました。
jQueryMobile – DateBox Demos

　利用手順

　導入手順

1. 以下からjsファイルとcssファイルをダウンロードします。
   • 404 – Not Found
2. 以下からi8nファイル(日本語ならjquery.mobile.datebox.i8n.jp.js)をダウンロードします。
   • Index of /cdn/datebox/i8n/
3. ダウンロードしたファイル(cssファイル1つ、jsファイル2つ)をサーバーにアップロードします。
4. アップロードしたcssファイルとjsファイルを読み込むようにします。

<!-- jquerymobileのcssの後に追記 -->
<link rel="stylesheet" type="text/css" href="/datebox/jquery.mobile.datebox.min.css" />

<!-- jquerymobileのjsの後に記述 -->
<script type="text/javascript" src="/datebox/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="/datebox/jquery.mobile.datebox.i8n.jp.js"></script>

あとはカレンダーを表示させたい箇所にタグを入力するだけです。

　カレンダーの表示方法

今回、表示させたのは日にちを設定するAndroid Modeと時間を設定するTime Mode。

　Android Mode

以下のようなタグを入力。

<input name="date" id="date" type="date" data-role="datebox" value="" readonly="readonly" data-options='{"mode": "datebox"}'>

デフォルトのままだと以下のように表示されます。
※i8nファイルがない場合は英語になります。

このままだと日にちの表示方法が気持ち悪いのでi8nファイルを修正。
デフォルトは以下。

dateFieldOrder: ['m', 'd', 'y'],
headerFormat: 'ddd, mmm dd, YYYY',

以下のように修正。

dateFieldOrder: ['y', 'm', 'd'],
headerFormat: 'YYYY/mm/dd(ddd)',

修正した後は以下のように表示されます。

　Time Mode

以下のようなタグを入力。

<input name="time" id="time" type="date" data-role="datebox" value=""  readonly="readonly"  data-options='{"mode": "timebox"}'>

以下のように表示されます。

まとめ

他にもカレンダー自体を表示させるモードや、フリップで値を変更させるモードなどもあります。
詳しくはjQueryMobile – DateBox Demosをチェックしてください。

自分のサイトの特性にあわせて色々選べるので非常に便利なプラグインです。
※ただし、現時点で一部の端末(現時点でわかっているのはiida)において表示が正しくおこなわれないケースを確認しています。