jQuery MobileのDateboxをカスタマイズ

スマートフォン jQuery JavaScript

※ここに書いてある情報は古いので、以下のページをお読みください。
jQuery MobileのDateboxをカスタマイズ-その２ - Kimura.Memo

スマートフォンで動作する、ちょっとした予定表で、jQuery MobileのDatepickerを使っていたのですが、jQuery Mobileがv1.0 Beta1になったと共に、v1.0 Bata1の公式ドキュメントから消えてしまいました。
（開発は続いているのでしょうか）

http://jquerymobile.com/blog/2011/05/27/jquery-mobile-team-update-week-of-may-23/より

Experimental datepicker: Moved out of the official docs & repo

The issue with this component is it’s really heavy and the UI team is currently re-factoring the datepicker from the ground-up so we wanted to shift this out of the official GitHub repo because it won’t be supported going forward. We will pull the new UI datepicker in once it’s finished, but that will be later this year.

そしてその下に、同様のdatepickerとしてDateBoxが紹介されています。

You can also check out alternate jQuery datepickers like DateBox, a slick jQuery Mobile optimized date picker.

そこで、うるさんにもコメントでお願いされたこともあって、いい気になって早速DateBoxをいじってみました。

jQueryMobile DateBoxの基本

  • 複数の日付入力モードを持つ「datepicker」
  • 「timepicker」としての機能もある。
  • HTML側で細かく設定変更できる。
  • 利用するには、の５つが必要。

jQueryMobile DateBox関連ファイルのダウンロード

jquery.mobile.datebox.js以外は今回編集しないので、インターネット上の公開提供ファイル（CDN）を利用します。

これらを〜内で上記の順に読み込みます。

そして<body>側に、

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

のように記述するとカレンダーが表示されるようになります。

基本のsource

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>JQM DateBoxテスト</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script src="jquery.mobile.datebox.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
 <h1>JQM DateBoxテスト</h1>
</div>
<div data-role="content">
<form action="">
 <fieldset data-role="fieldcontain">
  <div>
   <label for="mydate">年月日</label>
   <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}' value="" />
  </div>
  <div><input type="submit" name="" value="送信" data-theme="b" /></div>
 </fieldset>
</form>
</div>
<div data-role="footer" data-theme="b">
 <h4>JQM DateBoxテスト</h4>
</div>
</div>
</body>
</html>

↓こうなります

入力フィールドの右端にある丸いアイコンをタップすると、
↓カレンダーがポップアップします。

7月30日をタップすると、カレンダーが消え、入力フィールドに「2011-07-30」が挿入されます。

［要望１］日付のフォーマットを直したい

デフォルトの日付のフォーマットは、『YYYY-MM-DD』 です。
2011年7月30日なら、「2011-07-30」となります。
このままで不都合はありませんが、「2011/07/30」の方が良いこともありますね。

上記HTMLに以下の<script>タグを追加し、dateFormatオプションを設定します。

<script>
 jQuery.extend(jQuery.mobile.datebox.prototype.options, {
  'dateFormat': 'YYYY/MM/DD'
 });
</script>

※「jQuery.mobile.datebox.prototype.options,」の最後の「,」は必要です。

これで日付が「2011/07/30」と表示されるようになりました。

日付のフォーマットの指定方法は、

指定 例 説明
YYYY 2011 4 Digit Year
MM 07 2 Digit Month (zero pad)
mm 7 1 or 2 Digit Month
mmm July Text Month
DD 03 2 Digit Day (zero pad)
dd 3 1 or 2 Digit Day
ddd Saturday Day of week

などです。

［要望２］デフォルトで表示される日付を指定したい

デフォルトの日付は今日です。
日付値が表示される<input type="date" />なフィールドに、value="1999-09-09"などを指定すれば、指定した日付でカレンダーが表示されます。
気をつけなければいけないのは、日付のフォーマットを変更した場合は、そのフォーマットで指定しなければならないことです。
［要望１］で日付のフォーマットを変えていますので、value値への指定は、「1999/09/09」となります。

【修正前】

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

【修正後】

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}' value="1999/09/09" />

↓入力フィールドにデフォルト日付が表示されている

↓カレンダーを開くと入力フィールドの日付に連動している

<input type="date" />なフィールドは「空」のまま、カレンダー側のデフォルト日付を指定したい場合は、<script>タグ内のdateboxオプションに「defaultDate: [y,m,d] という配列形式で指定します。

ただし、バグなのか

<script>
 jQuery.extend(jQuery.mobile.datebox.prototype.options, {
 'defaultDate': [1999, 9, 9]
});
</script>

と指定しても、翌月の1999年10月のカレンダーが表示されてしまいます。

［要望３］カレンダーを日本語表示にする

→

カレンダーの「July 2011」を「2011年7月」に、「Su」「Mo」「We」などを「日」「月」「水」と表示させたいですね。
「daysOfWeekShort」で曜日を、「monthsOfYear」で月を、「titleDateDialogLabel」でタイトルを日本語に変更可能です。
［要望１］と同様、<script>タグ内のdateboxオプションに指定します。

<script>
 jQuery.extend(jQuery.mobile.datebox.prototype.options, {
  'dateFormat': 'YYYY/MM/DD',
  'daysOfWeekShort': ['日', '月', '火', '水', '木', '金', '土'],
  'monthsOfYear': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  'titleDateDialogLabel': 'カレンダー'
 });
</script>

はい、これで日本のカレンダーに。。

あ、あれ？

「July 2011」が「7月 2011」になっていますね。確かに日本語ですが、これはちょっとなじめませんね。
「2011年7月」と表示させるにはどうしたらよいのでしょうか？

Datepickerで指定できた「showMonthAfterYear:true」オプションは、DateBoxには無いようです。

jquery.mobile.datebox.js のソースを見てみると、753行目あたりに、

 o.monthsOfYear[self.theDate.getMonth()] + " " + self.theDate.getFullYear()

という記述があります。これが「7月 July」の部分のようですのでここを修正してみます。

【修正前】

 self.controlsInput.text( o.monthsOfYear[self.theDate.getMonth()] + " " + self.theDate.getFullYear() );

【修正後】

 self.controlsInput.text( self.theDate.getFullYear() + "年" + o.monthsOfYear[self.theDate.getMonth()] );

はい、これで日本のカレンダーに。。

今度はなりましたね。

【要望４】自分の好きなテーマでカレンダーを表示させたい

ポップアップするカレンダーは黒系のテーマで、入力フィールドがある方は青系のテーマです。
これを両方とも青系のテーマに統一したいと思います。

DateBoxでは、テーマも細かくオプション指定することができます。

「pickPageTheme」でカレンダー全体のテーマ指定、「pickPageButtonTheme」でカレンダーの日付ボタン色を指定できます。
これをdateboxオプションに追加します。

テーマ指定値は、「a」〜「e」まであります。青系テーマには、「b」を指定します。

<script>
 jQuery.extend(jQuery.mobile.datebox.prototype.options, {
  'dateFormat': 'YYYY/MM/DD',
  'daysOfWeekShort': ['日', '月', '火', '水', '木', '金', '土'],
  'monthsOfYear': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  'titleDateDialogLabel': 'カレンダー',
  'pickPageTheme': 'b',
  'pickPageButtonTheme': 'b'
 });
</script>

はい、これで青系テーマに。。

え、えぇっ？

ヘッダー部分が黒背景に白字のままですね。他のテーマ関連オプションを指定してみましたが、ここだけなぜか変更できません。

jquery.mobile.datebox.js のソースを見てみると、936行目付近に、

"<div data-role='header' data-backbtn='false' data-theme='a'>" +

という記述があります。なんと、javascriptのソース内に直接テーマ設定が書かれていました。

これをカレンダー全体のテーマ指定（pickPageTheme）と連動するように変更します。

【修正前】

 "<div data-role='header' data-backbtn='false' data-theme='a'>" +

【修正後】

"<div data-role='header' data-backbtn='false' data-theme='" + o.pickPageTheme + "'>" +

はい、これで青系テーマに。。

なりましたね。

各テーマのカレンダー一覧

▽デフォルトテーマ

デフォルトでは、

  • pickPageTheme: 'b'
  • pickPageButtonTheme: 'a'

となっています。

▽テーマ：a

▽テーマ：b

▽テーマ：c

▽テーマ：d

▽テーマ：e

テーマ：e の時だけ7月30日が他の日と同じ色で区別がつきません。
これは、今日の日付の色のデフォルトに「e」が指定されているからです。

今日の日付の色は、「pickPageTodayButtonTheme」で変更できます。
選択した日付の色を指定する「pickPageHighButtonTheme」も一緒に変更しておきます。

<script>
 jQuery.extend(jQuery.mobile.datebox.prototype.options, {
  'dateFormat': 'YYYY/MM/DD',
  'daysOfWeekShort': ['日', '月', '火', '水', '木', '金', '土'],
  'monthsOfYear': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  'titleDateDialogLabel': 'カレンダー',
  'pickPageTheme': 'b',
  'pickPageButtonTheme': 'b',
  'pickPageHighButtonTheme': 'a',
  'pickPageTodayButtonTheme': 'a'
 });
</script>

▽テーマ：e（修正）


dateboxには他にも色々な動作モードがあって、

data-options='{"mode": "datebox"}'

にすると、

↑こんなdatepickerが表示されます。

上記はオプションに、

  • 'headerFormat': 'YYYY年MM月DD日'
  • 'dateFieldOrder': ['y', 'm', 'd']

を指定しています。

スマートフォンではこのモードの方がボタンを押しやすいかもしれません。


また、ここで説明してきたDateBoxのオプション指定は、<input>タグのdata-options属性に指定することもできます。

<input name="mydate" id="mydate" type="date" data-role="datebox" value=""
 data-options='{"mode": "calbox", "dateFormat": "YYYY/MM/DD"}' />

<script>
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
 'mode': 'calbox',
 'dateFormat': 'YYYY/MM/DD'
});
</script>

のように書いた時は、そのページ内でグローバルな設定値となります。


ここまで、dateboxのほんの一部の機能だけを説明しました。

より詳しくは、http://jtsage.com/dp-demo/ をご覧ください。


＜関連URL＞
jQuery Mobile
http://jtsage.com/dp-demo/
GitHub - jtsage/jtsage-datebox: A multi-mode date and time picker for jQueryMobile, Bootstrap, & jQueryUI