jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
2024/06/06
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にbootstrap版とjQuery UI版のメモを書いたが今回はjQueryだけで対応したい。調べてみたところdatetimepickerというプラグインが良さそう。以下に実装方法のメモ。
サンプル
https://taitan916.info/sample/datetimepicker3/
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
ソース
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <script> $(function(){ $.datetimepicker.setLocale('ja'); //日本語化はこの一文が必要 $('#ymd').datetimepicker({ step: 10, format: 'Y-m-d H:i' }); }); </script>
導入にあたり「必要ファイルはCDN経由で読み込み」「ピッカーのテキスト部分は日本語」「日時は○分刻み指定」を行いたかったのでオプションを指定している。尚、日本語化に関しては、以下オプションを指定することで対応できるという記事を複数見かけたが、私の環境では正常に表示されなかった。
$('#ymd').datetimepicker({ lang:'ja' });
どうも以下記述が必要になった模様。
$.datetimepicker.setLocale('ja');
参考サイト
http://wp-me.blogspot.com/2016/04/jquery-datetimepicker.html
関連記事
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
PHPとSQLiteでi-mobileのデータをグラフ化する方法
i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...