【簡単】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に仕様も似てるので使いやすいです。
本記事で紹介したオプション以外にも様々な設定が出来るので、ぜひ参考に導入してみてください。
以上で解説を終わります。