jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法
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は選択した日時のオブジェクトが格納される。
関連記事
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...