jQuery Mobileプラグイン「Datebox」を活用したスマートフォンサイト作成

「jQuery プラグイン」の利用（16）

多彩なオプションによる日時入力

　その他のオプションを変更することで、さまざまな形での日時入力が可能になります。リスト1の5.「data-options」で、mode以外のパラメータにさまざまなオプションパラメータを設定します。オプションは多岐に渡っていて、すべてを紹介することはできませんが、一部のオプションを紹介します。

（1）カレンダー表示で月曜始まりにする

図8　overrideCalStartDayオプションに1を設定すると
カレンダーが月曜始まりになる

［リスト2］カレンダー表示を月曜始まりに変更（jQuery_Mobile_sample8.html）

<!--5.日付入力部分の設定-->
<input name="date1" id="date1" type="date" data-role="datebox" data-options='{"mode": "calbox", "overrideCalStartDay": 1}'>

　なお、設定値は以下のとおりです。

表2 overrideCalStartDayの設定値

設定値	曜日
0	日曜日（既定値）
1	月曜日
2	火曜日
3	水曜日
4	木曜日
5	金曜日
6	土曜日

（2）カレンダー表示でヘッダーにより月を選択させる

図9　calUsePickers・calNoHeaderオプションにtrueを設定すると
カレンダー表示において月をヘッダーで選択できる

［リスト3］カレンダー表示において月をヘッダーで選択できるように変更（jQuery_Mobile_sample9.html）

<!--5.日付入力部分の設定-->
<input name="date1" id="date1" type="date" data-role="datebox"
 data-options='{"mode": "calbox", "calUsePickers": true , "calNoHeader": true}'>

　共に既定値falseのオプションをtrueに設定します。月選択をヘッダーでできるので、幅広い年月を選択する場合には使いやすくなります。

（3）入力できない日を設定する

　特定の日を入力できないようにする設定はさまざまな方法があります。

図10　blackDatesオプションに特定日付（例として8/15～17）を
設定すると、その日付を選択できない

［リスト3］カレンダー表示において特定日付を選択できないように変更（jQuery_Mobile_sample10.html）

<!--5.日付入力部分の設定-->
<input name="date1" id="date1" type="date" data-role="datebox"
 data-options='{"mode": "calbox", "blackDates": ["2013-08-15","2013-08-16","2013-08-17"]}'>

　blackDatesオプションに設定した日付は選択できなくなります。

図11　enableDatesオプションに特定日付（例として8/15～17）を
設定すると、その日付しか選択できない

［リスト4］カレンダー表示において特定日付しか選択できないよう変更（jQuery_Mobile_sample11.html）

<!--5.日付入力部分の設定-->
<input name="date1" id="date1" type="date" data-role="datebox"
 data-options='{"mode": "calbox", "enableDates": ["2013-08-15","2013-08-16","2013-08-17"]}'>

　enableDatesオプションに日付を設定すると、その日付以外は選択できなくなります。

図12　afterTodayオプションにtrueを設定すると、
今日以降の日付しか選択できない

［リスト5］カレンダー表示において今日以降しか選択できないよう変更（jQuery_Mobile_sample12.html）

<!--5.日付入力部分の設定-->
<input name="date1" id="date1" type="date" data-role="datebox"
 data-options='{"mode": "calbox", "afterToday": true}'>

　既定値falseのafterTodayオプションにtrueを設定すると、今日以降の日付しか選択できないようになります。

　その他の特定日付の選択オプションは以下のとおりです。

表3 その他の特定日付の選択オプション

オプション	機能	既定値
beforeToday	今日以前の日付以外選択不可	false
notToday	今日のみ選択不可	false
maxDays	今日以前の○○日以外設定不可	false
minDays	今日以後の○○日以外設定不可	false

まとめ

　今回はjQuery MobileのプラグインDateboxを使って、入力フォームで日付・時間をさまざまなUIによって入力する方法を紹介しました。オプションを使うとさらに便利な日付・時間入力が可能になるので、日付・時間入力ダイアログを使ったスマートフォンサイトに使用してみてはいかがでしょうか。

参考資料

• jQuery Mobile
• Datebox