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

広告

関連記事

SnapCrab_NoName_2012-12-1_14-44-53_No-00

アプリのためにFacebookページ作成 -会社のメールアドレスで管理する方法-

アプリを作ると、色々と宣伝をしたくなります。 宣伝の方法は色々ありますが、今回はFacebookペ

記事を読む

no image

jQuery Mobileではまったこと -広告が表示されない!($.mobile.changePage()でのページ遷移)-

swipeした際にページ遷移をさせるためにjQueryMobileの$.mobile.changeP

記事を読む

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

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て100万DL超えしました!))し

記事を読む

no image

CakePHP1.3にSmartyを導入

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

記事を読む

no image

研究室での進捗報告の方法について、ふと思ったこと

* 以下に加筆・修正して移動しました。

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

no image

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

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

記事を読む

input

CakePHP2系でTwigを利用 -書き方のメモ-

CakePHP2系でTwigをどのように記述するかのメモ。 数パターンしか載せてないですが、だいた

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

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

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

記事を読む

広告

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 ↑