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

広告

関連記事

no image

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

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

記事を読む

no image

jQuery Mobileの1.0Beta3、1.0RC1で起きた現象 -iOS5で動かない!?-

最近おきたjQuery Mobile周りについてのメモ。 本来なら色々チェックしてちゃんと原因を調

記事を読む

no image

order byでハマったこと -order by、group byの処理順序-

CakePHPでorder byとgroup byを使っていてはまったことについてのメモ。 * 

記事を読む

no image

MacBook ProにGitのインストール

MacBook ProにGitをインストールしようと思いたち、思ったより手間取ってしまったので備忘録

記事を読む

スクリーンショット 2012-12-06 15.34.43

iPhoneアプリ開発 -端末がネットワークにつながっているかどうか知りたい-

* やりたいこと アプリがネットに繋がっていなければアラートボックスを表示させたい。 ネットに繋

記事を読む

no image

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

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

記事を読む

githubを使っての開発(1) -実践github-flow-

今は開発でgithubを利用しています。 開発をおこなう上で、githubをどのように扱えば良いの

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

no image

ソーシャルボタン(Twitterのフォローボタン、Facebookのオススメボタン)を設置する

サイトにソーシャルボタンを設置しようと思いちょこっと調べてみました。 * 設置するボタン

記事を読む

no image

複数アカウントでgithubを使う

1つの端末で複数のアカウントを使いたくなったので、その方法を整理してみた。 流れとしては以下のとおり

記事を読む

広告

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 ↑