勉強したことのメモ

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

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

   2024/06/06  jQuery JavaScript

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

 - jQuery JavaScript

  関連記事

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

テキストエリアを選択すると中身を全選択状態にする方法

テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...