jQuery Datepickerのデフォルト日付
jQuery UIの中でも一番使用頻度の多いDatepickerですが、思わぬところでつまずいてしまいましたので、備忘のためにも投稿しておきます。
Datepickerとは
日付入力をしてもらう際に、キーボードから年月日を入れる代わりに、カレンダーが表示され日付をクリックして日付を入力するUIです。
自分でいちから作成しようとすると、非常に手間が掛かるのですが、jQueryの派生UIセットであるjQuery UIを使う事で誰でも簡単に実装が出来ます。
// 上記インプット要素に対し
// 下のJSを実行するだけ
<input type="text" class="form-control" id="Date">
// $('#Date').datepicker();
オプション設定
上記のサンプルはオプションを一切設定せず、デフォルトのままです。
デフォルトのオプション設定では、ほとんどが英語表記になっていますので、日本人ユーザのために日本語表記に変える部分を中心に記載します。
詳細は、(英語ですが)本家ページをご参照ください。 http://api.jqueryui.com/datepicker/
ここでの設定値
$('#Date').datepicker({
dateFormat: 'yy/mm/dd (DD)',
yearSuffix: '年',
showMonthAfterYear: true,
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
minDate: new Date(),
maxDate: '+0d',
hideIfNoPrevNext: true
});
- dateFormat
-
入力される日付のフォーマットです。
'yy'は4桁の西暦年です。 '曜日'は後述の'yy/mm/dd (DD)'→ '2014/02/18 (曜日)'dayNamesMinを参照。 - showMonthAfterYear
-
カレンダー上部の年後ろに月を表示するかどうかです。
'月名'は後述のtrue→ '2014年月名'monthNamesを参照。 - dayNamesMin
-
カレンダー上部に表示する曜日ラベルのリストです。
['日', '月', '火', '水', '木', '金', '土'] - minDate
-
カレンダー上で選択可能な最小の日(一番古い日)です。
new Date(2014, 1 - 1, 1)→ 2014/01/01が最小に設定'-7d'→ 当日から7日前が最小に設定 - firstDay
-
カレンダー上の週の始まりの曜日を設定します。
デフォルトは'0'で日曜日始まり。1→ 月曜日始まり
- yearSuffix
-
カレンダー上部の西暦4桁の後ろに付ける文字です。
'年'→ '2014年' - monthNames
-
カレンダー上部に表示する月名のリストです。
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] - dayNames
-
インプットフィールドに表示される曜日のリストです。
['日', '月', '火', '水', '木', '金', '土']→ '2014/02/18 (火)' - maxDate
-
カレンダー上で選択可能な最大の日(一番新しい日)です。
new Date()→ 当日が最大に設定'+2m'→ 当日から2ヶ月先の日が最大に設定 - hideIfNoPrevNext
-
もうそれ以上カレンダーを前後に動かせない場合に左右の矢印カーソルを非表示にするかどうか。
true→ 最小月/最大月でカーソルが非表示
本題の罠
ここから本題の陥りやすい罠に関して、冒頭にも書いたのですが、インプットフィールドにデフォルトの値として日付を入れたい場合の設定です。
本家のドキュメントからそれらしいものをピックアップしました。
- defaultDate
-
カレンダー上でデフォルトでハイライトされる日付です。
オプション名からデフォルト日の設定の様ですが、あくまでもカレンダー上のハイライトする日を設定するオプションです。
'-9d'→ 当日'2014/02/19'から9日前の2014/02/10の日をハイライト。
- setDate
-
こちらが、意図した初期値を設定するためのオプションです。
$("#Date").datepicker("setDate", "02/15/2014");ですが、何度やっても設定が出来ずに
$("#Date").datepicker("setDate", "2014/02/15");や
$("#Date").datepicker("setDate", "-3d");などを
試してみましが、やはりダメで罠にはまりました。
// フィールドには何も表示されず
$("#Date").datepicker("setDate", "2014/02/15");
// こちらもダメ
$("#Date").datepicker("setDate", "-3d");
// typeをdate形式に変更しても結果は同じくダメ
<input type="date" id="#Date">
本家のドキュメントを(斜め読みではなく)丁寧に読んで行った所、setDateは、他のオプションとは違い、Methodsに分類されるもので、使い方が違うようなのです。
// datepickerを2回重ねて実行するようです。
$("#Date").datepicker().datepicker("setDate", "2014/02/15");
// もしくは2回に分けて実行
$("#Date").datepicker();
$("#Date").datepicker("setDate", "2014/02/15");
// ==============================================================================================
// 要するに、一度オプション等を設定しdatepickerを実行し、
$('#Date').datepicker({
dateFormat: 'yy/mm/dd (DD)',
yearSuffix: '年',
showMonthAfterYear: true,
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
minDate: new Date(),
maxDate: '+0d',
hideIfNoPrevNext: true
});
// その後に改めて、setDateを実行すると良いのです。
$("#Date").datepicker("setDate", "2014/02/15");
こんな単純な事なのに理解し、解決するまでに2時間も掛かってしまいました。
途中、様々な先人のblog等を参考にしましたが、ほとんどがエントリーが無かったり、間違っていたりと散々でしたので、きっと他にもお困りの方がいると思います。参考にして頂ければ幸いです。