ENTEREAL

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/mm/dd (DD)' → '2014/02/18 (曜日)'

'yy'は4桁の西暦年です。 '曜日'は後述のdayNamesMinを参照。
showMonthAfterYear

カレンダー上部の年後ろに月を表示するかどうかです。

true → '2014年月名'

'月名'は後述のmonthNamesを参照。
dayNamesMin

カレンダー上部に表示する曜日ラベルのリストです。

['日', '月', '火', '水', '木', '金', '土']

 

minDate

カレンダー上で選択可能な最小の日(一番古い日)です。

new Date(2014, 1 - 1, 1) → 2014/01/01が最小に設定

'-7d' → 当日から7日前が最小に設定

firstDay

カレンダー上の週の始まりの曜日を設定します。

1 → 月曜日始まり

デフォルトは'0'で日曜日始まり。
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の日をハイライト。

defaultDate
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等を参考にしましたが、ほとんどがエントリーが無かったり、間違っていたりと散々でしたので、きっと他にもお困りの方がいると思います。参考にして頂ければ幸いです。


Same Category

jQuery Table Sorterのリリース