jQueryのdatetimepickerで選択した日付によって時間を変更する方法
jQueryのライブラリ【datetimepicker】で選択した日付によって時間を変更する方法を知りたい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
datetimepickerで日付毎に時刻を変更する by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
入力フィールドをクリックするとdatetimepickerが立ち上がります。
選択できる時間の初期値が10:00〜20:00の間です。
日付が3日の時だけ選べる時間帯が12:00、13:00、15:00のみになるよう設定しています。
実装手順は以下の通りです。
jQueryコード
$(function () {
$('#datetimepicker').datetimepicker({
onChangeDateTime: function (dp, $input) {
seldate = new Date($input.val());
day = seldate.getDate();
// 選択した日付を取得
console.log(day);
// 3日を選択したら
if (day == 3) {
$('#datetimepicker').datetimepicker({
allowTimes: ['12:00', '13:00', '15:00']
})
// 3日以外の日付
} else {
$('#datetimepicker').datetimepicker({
allowTimes: ['10:00', '11:00', '12:00', '13:00', '15:00', '17:00', '18:00', '19:00', '20:00']
})
}
}
});
// 初期値
$('#datetimepicker').datetimepicker({
allowTimes: ['10:00', '11:00', '12:00', '13:00', '15:00', '17:00', '18:00']
})
});
任意の日付だけ時間帯を変更するコード例です。
onChangeDateTime関数をdatetimepickerの実行関数内で使います。
この関数で【日付を選択したら】という処理を実行できます。
new Date($input.val());で選択した日付情報を取得。
getDate()関数を使って、日付のみ取り出します。
上記取り出した日付が、任意の日付（コード例だと3日）に該当したら、allowTimesパラメータで時間帯を変更します。
以上で実装完了です。
まとめ
datetimepickerの導入方法については以下記事をご参考ください。
以上で解説を終わります。
https://kasumiblog.org/jquery-datetimepicker/
目次
