Written by Kasumi

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/

目次

関連記事

jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
2922
jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

更新日:2022.09.09
5235
jQuery

jQuery UI Datepickerで本日を基準に過去を非選択。選択可能日を設定する方法

2023.10.02
711
jQuery

【簡単jQuery】radioボタンのcheckedを取得し、value値によってイベントを発火する方法。

更新日:2022.09.09
12617