First Day: calendar

スマートフォン用画面を作るのに便利なjQuery Mobile。日付選択用のプラグインがリニューアルしたようで、現在稼働するのはこっちの方。

jQueryMobile – DateBox Demos

カレンダー形式を使用したい場合は、jQuery、jQM(1.0.1以上)、あとはコアファイルと使いたいモードのjsを読み込む。CSSも必須です。

jqm-datebox.ja.js は日本語に変換したもの。(後述)
あとは下記のように設定してあげれば動きます。

type=”date” と data-role=”datebox” と data-options=’{“mode”:”calbox”}’ は必須。(data-optionsを入れないとエラーが出て怒られました)

valueには初期値を入れてあげれば良いのですが、dateFormat で設定した型に沿うように指定する必要があります。

日本語用ファイルは個人的に設定したかったので、諸々参考にしつつ下記のようにしました。

これで万事解決~♪と思いきや、日付選択用カレンダーのヘッダは headerFormat が無視されます。それもそのはず、日付選択の場合、ヘッダに日付が入っていたら変だから。

ここまできて「7月 2012」とかいう文字が許せなかったので、headerFormatCal: “%Y年%B”, というのを追加して、jqm-datebox.mode.calbox.min.js の該当箇所をカスタマイズしました。

旧)

新)

これで 2012年7月 という表記になりました。めでたしめでたし。

(以下追記)

1.タップエリアを広げたい

ボタンをタップしないとカレンダーが開かないので、入力欄(readonly 設定してあるので入力できないけど)を全体をタップすると開くようにする。

data-options に “useFocus”:true を追加設定すればOK。イベントのトリガーはタップ(クリック)というよりフォーカスなんだね。

2.テーマを変えたい

日本語化ファイルで適用できなかったので、アレー?と思っていたら、これも data-options での設定でした。

“themeDate”:”b” などと追加設定すればOK。ただ、幾つかに項目が分かれているので、それぞれ設定してあげる必要があります。詳細はjQueryMobile – DateBox Options を参照。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA