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/

関連記事

JavaScript プログラミング

【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法

2020.05.26
1811
JavaScript プログラミング

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

2022.04.25
442
JavaScript プログラミング

固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

2020.04.27
804
JavaScript プログラミング

jQueryを使ってdivタグ、pタグ等のテキスト値を取得する方法

2022.01.08
120