Datepickerとは
日付を入力させたい場合に、キーボードから直接年月日を入れる代わりにカレンダーが表示されて日付をクリックすることで日付が入力できるというUIです。
使い勝手がよく便利なので、入力フォームなどでよく見かけるかと思います。
これを自力で作成しようとすると非常に手間が掛かってしまいますが、jQueryの派生UIセットであるjQuery UIを使う事で誰でも簡単に実装が可能です。
オプション設定
デフォルトでも十分使えますが、オプション設定を使うことでより便利にカスタマイズが可能です。
dateFormat
入力される日付のフォーマットです。
‘yy/mm/dd (DD)’ → ‘2014/02/18 (曜日)’
showMonthAfterYear
カレンダー上部の年後ろに月を表示するかどうかです。
true → ‘2014年月名’
dayNamesMin
カレンダー上部に表示する曜日ラベルのリストです。
minDate
カレンダー上で選択可能な最小の日(一番古い日)です。
firstDay
カレンダー上の週の始まりの曜日を設定します。
1 → 月曜日始まり
yearSuffix
カレンダー上部の西暦4桁の後ろに付ける文字です。
‘年’ → ‘2014年’
monthNames
カレンダー上部に表示する月名のリストです。
[‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]
dayNames
インプットフィールドに表示される曜日のリストです。
maxDate
カレンダー上で選択可能な最大の日(一番新しい日)です。
new Date() → 当日を設定
注意点！！
殆どの人がハマると思いますが・・・。
デフォルトで日付を設定したい場合があると思います。
この際にオプションとしては setDate を使用します。
これですが、何度試しても意図した値が設定されません。。。
原因は本家のドキュメントにも記載がありますが
setDate は他のオプションと違い、Methodsに分類されるため使い方が異なるようです。
// 2回に分けて実行する必要がある.
$("#Date").datepicker();
$("#Date").datepicker("setDate", "2014/02/15");
// 実行した当日を初期値に設定する.
$("#Date").datepicker();
$("#Date").datepicker("setDate", new Date());
注意してください。
