jQuery UIのDatepickerでのFromとToで前後関係を持たせたい場合のサンプル
まだまだ、jQuery UIを使う場面は多いと思う。
そんな中でとりわけ、日付入力をする場合はDatepickerにお世話になる場合が多いと思う。単純に一つの日付を入力する場合ならいいが、検索画面などFrom-Toなど複数のテキストボックスに渡って関係があり前後関係をつけたい場合がある。
jQuery UIを使った入力をするのなら入力の段階でそもそもこのFrom-Toの前後関係を崩れないように入力させるという方向がよいように感じる。
そこで、いろんな動作に耐えうるよう考慮してサンプルを作ってみた。
- 通常にDatepickerの入力でFrom-Toの前後関係が崩れないこと（Fromより前の日付をTo側で入力できない。その逆もしかり）
- テキストボックスに直接入力された時でもFrom-Toの前後関係が崩れないこと（よくあるサンプルではこれができてないことが多い）
- テキストボックスの入力を消したときは入力制限が解除されること（よくあるサンプルではこれができてないことが多い）
HTML
from: <input id="from1" type="text" /> to: <input id="to1" type="text" />
$(function() {
$("#from1").datepicker({
// from側の日付がdatepickerで選択されたらto側のdatepickerに日付制御を入れる
onSelect: function (selectedDate) {
$("#to1").datepicker("option", "minDate", selectedDate);
}
});
$("#from1").change(function () {
// テキストボックスに直接入力された時の制御
// YYYYMMDD or YYYY/MM/DD形式での入力を想定
var v = this.value;
if (v.length == 0) {
// from側の日付を消したときto側の日付制御を事実上外す
$("#to1").datepicker("option", "minDate", new Date(1900, 0, 1));
} else {
// 一旦、「/」を外して解析
var date_temp = this.value.replace(/\u002f/g, "");
var y = date_temp.substring(0, 4);
var m = date_temp.substring(4, 6);
var d = date_temp.substring(6, 8);
var di = new Date(y, m - 1, d);
// to側のdatepickerに日付制御を入れる
$("#to1").datepicker("option", "minDate", di);
// 解析したdateでテキストボックにYYYY/MM/DD形式で書き戻す
var yt = di.getFullYear();
var mt = di.getMonth() + 1;
var dt = di.getDate();
this.value = yt + "/" + mt + "/" + dt;
}
})
$("#to1").datepicker({
onSelect: function (selectedDate) {
$("#from1").datepicker("option", "maxDate", selectedDate);
}
});
$("#to1").change(function () {
var v = this.value;
if (v.length == 0) {
$("#from1").datepicker("option", "maxDate", new Date(2200, 0, 1));
} else {
var date_temp = v.replace(/\u002f/g, "");
var y = date_temp.substring(0, 4);
var m = date_temp.substring(4, 6);
var d = date_temp.substring(6, 8);
var di = new Date(y, m - 1, d);
$("#from1").datepicker("option", "maxDate", di);
var yt = di.getFullYear();
var mt = di.getMonth() + 1;
var dt = di.getDate();
this.value = yt + "/" + mt + "/" + dt;
}
})
});
