勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法

  jQuery JavaScript

jQueryの「DateTimePicker」プラグインで日付や時間選択時、あらかじめ指定した処理を実行させたい。以下に対応方法をメモ。

 

DateTimePicker

公式サイト

https://xdsoft.net/jqplugins/datetimepicker/

GitHub

https://github.com/xdan/datetimepicker

CDN

https://cdnjs.com/libraries/jquery-datetimepicker

https://www.jsdelivr.com/package/npm/jquery-datetime-picker

 

対応方法

ソースコード

<input type="text" id="date">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/build/jquery.datetimepicker.full.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/jquery.datetimepicker.min.css " rel="stylesheet">

<script>
$.datetimepicker.setLocale(`ja`);
$(`#date`).datetimepicker({
    format: `Y-m-d H:i:s`,
    //日付選択時の処理
    onSelectDate:function(date, obj){
        console.log(`日付が選択されました。`);
    },
    //時間選択時の処理
    onSelectTime: function(time, obj){
        console.log(`時間が選択されました。`);
    }
});
</script>

「onSelectDate:function」のdateやtimeは選択した日時のオブジェクトが格納される。

 - jQuery JavaScript

  関連記事

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法
JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

AjaxにてHTTPリクエストメソッドをDELETE / PUTで送信する方法
AjaxにてHTTPリクエストメソッドをDELETE / PUTで送信する方法

あるAPIにAjaxでリクエストする際、GET / POSTではなくDELETE ...

jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法
jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法

jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...