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は選択した日時のオブジェクトが格納される。
関連記事
-
-
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...
-
-
タブアンダー広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
-
「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」 ...
-
-
FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...