【簡単】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に仕様も似てるので使いやすいです。

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

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

Ads

関連記事

HTMLCSS JavaScript プログラミング

【簡単】slickを使って次のスライドをチラ見せさせる方法【CSS・jQuery】

2022.02.09
287
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
85
HTMLCSS JavaScript プログラミング

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

2022.04.12
27
PHP プログラミング

Use of undefined constant campaign – assumed ‘文字列'(this will throw an Error in a future version of PHP) inエラーがでる場合の対処方法

2022.01.29
23