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

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


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

 DateBoxプラグイン

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

 利用手順

 導入手順

  1. 以下からjsファイルとcssファイルをダウンロードします。

  2. 以下からi8nファイル(日本語ならjquery.mobile.datebox.i8n.jp.js)をダウンロードします。

  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)において表示が正しくおこなわれないケースを確認しています。

広告

関連記事

Jenkins + iPhoneアプリ(番外1) -TestFlightを利用する-

* これまで - -- 執事(Jenkins)を雇いました。 * やりたいこと Jenk

記事を読む

no image

リンク文字をタッチしても色が変わらない --webkit-tap-highlight-colorのメモ-

* 背景 jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッ

記事を読む

no image

CakePHP1.3にSmartyを導入

いい加減、CakePHP(1.3)にもSmartyを導入することにしました。 * ダウンロード

記事を読む

スクリーンショット 2012-10-20 14.26.24

iPhoneアプリ開発 −UITabControllerの利用−

* やりたいこと 上にあるように下部にあるタブをタッチしたら別のページを呼び出す。 * 

記事を読む

no image

iPhoneアプリ開発 -iOS6から変わったこと-

Deployment Targetを5.1にしていた時には気がつかなかったのですが、iOS6になって

記事を読む

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

no image

PhoneGapを触ってみた ―導入編―

スマートフォン対応をjQuery Mobileを使ってやったので、その資産をいかせないかということで

記事を読む

no image

jQuery Mobileでdata-role=headerを使うときの注意点 -勝手にタイトルが変更される件-

* 現象 +headタグでtitleタグで文字列(A)を記述している +data-role=he

記事を読む

no image

カレログ騒動で考えたライフログのこと

今回、カレログというAndroidアプリが話題になり騒動になってます。 というわけで、ふとカレログ

記事を読む

no image

Androidアプリ開発 -画像を加工してセピア色にしてみる-

* やりたいこと ギャラリーから選んだ画像を加工してセピア色にしたい * ソース ** 画像を取得

記事を読む

広告

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑