jQuery MobileのDateboxをカスタマイズ-その２

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<!-- 以下はCalBox modeの時に必要 -->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<!-- 以下は日本語表記のために必要 -->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.ja.utf8.js"></script>

v1.1.0以降、必要な入力モード用のJSファイルのみをロードするように変わりました。
CalBox以外の入力モードを使う場合は、jqm-datebox.mode.calbox.min.js を、以下に書き替えます。
複数のモードを使用する場合は、使いたいモード用の.jsファイル参照する<script>タグを追加します。

入力モード	読み込むJSファイル
DateBox mode	jqm-datebox.mode.datebox.min.js
SlideBox mode	jqm-datebox.mode.slidebox.min.js
FlipBox mode	jqm-datebox.mode.flipbox.min.js
DurationBox mode	jqm-datebox.mode.durationbox.min.js
CustomBox mode	jqm-datebox.mode.custombox.min.js
CustomFlip mode	jqm-datebox.mode.customflip.min.js

いろいろな入力モード

※ダウンロードする場合は、http://dev.jtsage.com/jQM-DateBox/demos/install.html の「Download Links」から。

［3］入力フィールドにdatebox起動用の属性を記述

<body>側に以下を記述します。

<div>
 <label for="cal">CalBox</label>
 <input name="date" id="cal" type="text" data-role="datebox" data-options='{"mode":"calbox"}' value="" />
</div>

これで以下のようなカレンダーが表示されるようになります。
左画像の赤丸内ボタンをタップすると右画像のようにカレンダーがポップアップします。
デフォルトでは「今月」のカレンダーが表示され、「今日」の日付がハイライト表示されます。

日本語表記用のローカライズファイル jquery.mobile.datebox.i18n.ja.utf8.js を読み込んでいますので、既に月名や曜日は日本語で表示されています。楽ですね。
ただ、年月表示の部分は「7月 2012」で、これを「2012年7月」にするには前回同様 calbox.js のソースを直接編集しなければなりません。
（［4］年月表示を「YYYY年MM月」形式に変更する参照）

［4］年月表示を「YYYY年MM月」形式に変更する

【2013/09/05追記】コメント欄でのご指摘によりますと、現在のバージョンでは「年月」順序がオプションで指定できるようです。
【2013/09/06追記】現在のバージョン用「YYYY年MM月」形式への変更の方法をjQuery MobileのDateboxをカスタマイズ-jQueryMobile v1.2.0+対応版 - Kimura.Memoに書きました。
「CalBox」ヘッダのすぐ下に表示されている年月表示を「7月 2012」ではなく、「2012年7月」に変更したいと思います。
オプション指定では変更できませんので、calbox.js のソースを編集します。

（1）http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.jsをダウンロードし、jqm-datebox.mode.calbox.custom.js という名前で保存する。
※修正するので calbox.min.js ではなく、非圧縮の calbox.js を使います。

（2）ダウンロードしたjqm-datebox.mode.calbox.custom.jsをテキストエディタ等で開き、129行目付近を以下のように修正します。
【修正前】

w.__('monthsOfYear')[w.theDate.getMonth()] + " " + w.theDate.getFullYear() +

【修正後】

w.theDate.getFullYear() + "年" + w.__('monthsOfYear')[w.theDate.getMonth()] +

（3）<script>タグでjqm-datebox.mode.calbox.min.jsを読み込んでいる箇所を、jqm-datebox.mode.calbox.custom.jsに変更します。
この時点のHTMLは以下のようになっています。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CalBox Test</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<!-- 以下はCalBox modeの時に必要（カスタマイズ版） -->
<script type="text/javascript" src="jqm-datebox.mode.calbox.custom.js"></script>
<!-- 以下は日本語表記のために必要 -->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.ja.utf8.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-backbtn="false">
 <h1>CalBox Test</h1>
</div>
<div data-role="content">
 <form action="" method="get" data-ajax="false">
  <div>
   <label for="cal">CalBox</label>
   <input name="date" id="cal" value="" type="text" data-role="datebox" data-options='{ "mode":"calbox" }' />
  </div>
 </form>
</div><!--/content-->
</div><!--/page-->
</body>
</html>

これで「2012年7月」になりました。

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

DateBoxのデフォルトの日付のフォーマットは、『YYYY-MM-DD』ですが、日本語ローカライズファイルにより、『YYYY/MM/DD』に変更されています。
これを『YYYY-MM-DD』に戻したい時は、上記HTMLに以下の<script>タグを追加し、dateFormatオプションを設定します。
ローカライズファイルで設定されているオプションを上書きするには「override」を頭につけなくてはなりません。

<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'overrideDateFormat': '%Y-%m-%d'
});
</script>

overrideDateFormat オプションは、<input> タグ内の data-options 属性値に指定することもできます。

 <input name="date" id="cal" type="text" data-role="datebox" data-options='{ "mode":"calbox", "overrideDateFormat":"%Y-%m-%d" }' value="" />

これで日付が『YYYY-MM-DD』になりました

日付のフォーマット一覧は以下にあります
http://dev.jtsage.com/jQM-DateBox/demos/api/dateformat.html

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

日付値が表示されるフィールドに、value値を指定します。
気をつけなければいけないのは、日付のフォーマットを変更（overrideDateFormat）した場合は、そのフォーマットで指定しなければならないことです。
［要望１］で日付のフォーマットを変えていますので、value値への指定は、「1999-09-09」となります。

【修正後】

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

▽入力フィールドに指定日付が表示され、カレンダーを開くと入力フィールドの日付に連動

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

前回、このオプションを紹介した際、 "defaultDate": [1999, 9, 9] だと、10月のカレンダーが表示されるため、「バグ？」などと言っておりましたが、これは「月」の部分を
１月 → 0
２月 → 1
...
９月 → 8
10月 → 9
11月 → 10
12月 → 11
のように指定する仕様のようです。
つまり、1999年9月9日ならば、"defaultValue":[1999,8,9] となります。

【修正後】

<input name="date" value="" id="cal" type="date" data-role="datebox" data-options='{"mode": "calbox", "defaultValue":[1999,8,9] }' />

▽入力フィールドは空欄だが、カレンダーを開くとdefaultValueで指定した日付に連動

defaultValue指定は［要望１］と同様、jQuery.mobile.datebox.prototype.options に書くことも可能です。
jQuery.mobile.datebox.prototype.options に書けばそのページ内でグローバルな設定に、data-options 属性値に書けばその入力フィールドのみで有効となります。

［要望３］カレンダーのヘッダを消したい

「CalBox」と表示されているヘッダを非表示にします。
useHeader オプションに、false を指定します。
【修正後】

<label for="cal">CalBox</label>
<input name="date" value="" id="cal" type="date" data-role="datebox" data-options='{"mode": "calbox", "useHeader":false }' />

▽ヘッダが消えた

ちなみにヘッダに表示されるテキストは、<label>〜</label>内のものが表示されます。
titleDateDialogLabel オプションで指定することも可能ですが、<label>テキストが優先されます。
（ローカライズファイル設定項目なので、overrideTitleDateDialogLabel にすること）

［要望４］カレンダーのテーマをカスタマイズしたい

デフォルトのカレンダーは黒系のテーマです。
これを自分好みのテーマ（青系）に変更します。

CalBoxモードの主なテーマオプションとデフォルト値

テーマオプション	説明	デフォルト値	変更値
themeHeader	カレンダーのヘッダ	a	b
themeDateToday	今日の日付	a	d
themeDatePick	選択した日付	a	e
themeDate	その他の日付	d	b

※前回調べた時にあった「pickPageTheme」，「pickPageButtonTheme」オプションは無くなったようです。

【修正後】

<input name="date" value="2012-07-31" id="cal" type="date" data-role="datebox" data-options='{"mode": "calbox", "themeHeader":"b", "themeDateToday":"d", "themeDatePick":"e", "themeDate":"b" }' />

▽青系テーマになった

▽主なテーマオプションの配置は以下のようになっています。

テーマは jQueryMobile のテーマ指定と同じですので、a〜eまであります。

［要望５］Date・Flip・SlideBox の『年月日』表示を日本方式にしたい

DateBox，FlipBox，SlideBox は、日本語ローカライズファイル適用直後の状態で以下のようになっています。

▽DateBox

▽FlipBox

▽SlideBox

上部に太字で表示されている日付が、「土曜, 7月 28, 2012」です。
直感的にわかりにくいですね。これを日本的に「2012年7月28日(土)」と表示させるようにします。

また、DateBox，FlipBox の日付を選択するフィールド側が左から「月」「日」「年」の順に並んでいます。
これも「年」「月」「日」にしたいですね。

【修正後】

<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'overrideHeaderFormat': '%Y年%B%-d日(%a)',
    'overrideDateFieldOrder': ['y','m','d']
});
</script>

選択日付を「2012年7月28日(土)」の形式で表示するには headerFormat オプションで指定します。
日付の入力形式は、http://dev.jtsage.com/jQM-DateBox/demos/api/dateformat.html に詳細があります。
「%-d」は、一桁の「日」の場合、0を付けずに詰めて表示するという指定です。

入力フィールドの表示順は、dateFieldOrder オプションに、「年」→「'y'」、「月」→「'm'」、「日」→「'd'」のキーワードを配列で指定しています。

headerFormat，dateFieldOrder オプション共に、ローカライズファイルの設定項目ですので［要望１］に書いたように、「override」を頭につけて指定します。

▽DateBox（完全日本版）

▽FlipBox（完全日本版）

▽SlideBox（完全日本版）

その他の主なオプション

オプション	説明	デフォルト値	設定例
lockInput	入力フィールドのマニュアル入力を無効にする	true	false
useModal	背景を暗くしてダイアログ表示	false	true
useInline	インラインで常に表示する	false	true
useButton	入力フィールドに起動ボタンを配置	true	false
focusMode	入力フィールドがフォーカスされたら表示	false	true
useNewStyle	起動ボタンを新しいスタイルにする	false	true
overrideStyleClass	useNewStyle:true の時、適用するCSSクラス	false	`classname`
maxDays	「今日」から何日目まで選択可能にするか	false	365
minDays	「今日」以前、何日目まで選択可能にするか	false	365
maxYear	指定した「年」の前年まで選択可能	false	2020
minYear	選択可能な最小「年」	false	2000
calNoHeader	上部の「xxxx年xx月」行を非表示にする	false	true

たとえば、以下のようにすると、

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CalBox Test</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<style type="text/css">
.ui-myicon-datebox {
    background-image: url("calendar.gif") !important;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<!-- ▽［4］年月表示を「YYYY年MM月」形式に変更する を参照 -->
<script type="text/javascript" src="jqm-datebox.mode.calbox.custom.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.ja.utf8.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-backbtn="false">
 <h1>CalBox Test</h1>
</div>
<div data-role="content">
 <form action="" method="get" data-ajax="false">
  <div>
   <label for="cal">年月日</label>
   <input name="date" id="cal" type="text" data-role="datebox" value=""
    data-options='{ "mode":"calbox", "themeDate":"e", "focusMode":true, "useModal":true, "useHeader":false, "useNewStyle":true, "overrideStyleClass":"ui-myicon-datebox" }' />
  </div>
 </form>
</div><!--/content-->
</div><!--/page-->
</body>
</html>

↓↓

useNewStyle ＆ overrideStyleClass により、入力フィールドのアイコンが自分で用意したもの（）に変わっています。
focusMode:true により、赤枠内のどこをタップしてもカレンダーが起動します。
そして useModal により、カレンダーがポップアップすると、それ以外の背景がダークアウトします。