【簡単】jQueryのDatepickerに時間設定を追加したDatetimepickerを導入する方法

jQuery Uiを使ってカレンダーから日付を選択できるDatepicker プラグインを使ってる。

日付選択にプラスして時間も設定できるようにしたい。

本記事ではDatetimepickerを使ってこのような悩みを解決します。

DatetimepickerをCDNで読み込む

    <!-- jQuery-datetimepicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>

上記CDNを実装環境に記述する事でDatetimepickerを使えるようになります。

実行コード

$(function() {
  $('.hoge').datetimepicker({
  });
});

上記コードをscript内に記述しましょう。

セレクタにはクリック要素をあてます。

指定したセレクタ要素をクリックしたら時間と日付カレンダーがポップアップします。

以上で時間も設定できるdatapickerの実装が完了しました。

様々なオプション

実行関数内で様々なオプションを設定できます。

時間のみ出力する

$(function() {
  $('.hoge').datetimepicker({
      datepicker:false, // 時刻のみ表示する
  });
});

日付カレンダーは非表示にして、時間のみ表示したい場合はdatepicker:falseを指定します。

日本語化

$(function() {
  $.datetimepicker.setLocale('ja');
  $('.hoge').datetimepicker({
  });
});

カレンダーの曜日を日本語化したい場合は実行関数の前に$.datetimepicker.setLocale('ja');を記述します。

時間の範囲を設定

    $(function() {
      var logic = function(currentDateTime) {
        this.setOptions({
          minTime: '10:00',
          maxTime: '19:00'
        });
      };
      $('.hoge').datetimepicker({
        onChangeDateTime: logic,
        onShow: logic
      });
    });

時間範囲を設定できます。

setOptionsを使い、minTime（最小時間）、maxTime（最大時間）の時間を設定し変数に代入します。

実行関数内でonChangeDateTime、onShowプロパティを追加。

それぞれの値に先ほど宣言した変数を代入すればOKです。

まとめ

Datetimepickerを使えば簡単に時間を設定できます。

Datepickerに仕様も似てるので使いやすいです。

本記事で紹介したオプション以外にも様々な設定が出来るので、ぜひ参考に導入してみてください。

以上で解説を終わります。