jQueryで年月日と時間のピッカー(datetimepicker)

2020/07/10

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にbootstrap版とjQuery UI版のメモを書いたが今回はjQueryだけで対応したかった。以下に導入方法のメモ。

見出し

1 サンプル
2 ソース
3 参考サイト

サンプル

http://sample.taitan916.info/datetimepicker3/

ソース

<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>

$(function(){

$.datetimepicker.setLocale('ja'); //日本語化はこの一文が必要

$('#ymd').datetimepicker({

step: 10,

format: 'Y-m-d H:i'

});

</script>

導入にあたり「必要ファイルはCDN経由で読み込み」「ピッカーのテキスト部分は日本語」「日時は○分刻み指定」を行いたかったのでオプションを指定している。尚、日本語化に関しては、以下オプションを指定することで対応できるという記事を複数見かけたが、私の環境では正常に表示されなかった。

$('#ymd').datetimepicker({
	lang:'ja'
});

$('#ymd').datetimepicker({

lang:'ja'

});

どうも以下記述が必要になった模様。

$.datetimepicker.setLocale('ja');

1	$.datetimepicker.setLocale('ja');

参考サイト

http://wp-me.blogspot.com/2016/04/jquery-datetimepicker.html

- JavaScript, jQuery

: Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

: リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

: jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

: jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

: javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

: jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な処理を行えそうな点があったので ...

: jQueryでセレクトメニューにcheckedをつける

セレクトメニュー(セレクトボックス)で特定の項目をデフォルトで選択しておきたかっ ...

: JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

: jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。「now load ...

: JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

PREV: WordPressで記事検索時に投稿ID順にならない場合
NEXT: フォームからzipファイルをアップロードしサーバ上で解凍したい

jQueryで年月日と時間のピッカー(datetimepicker)

サンプル

ソース

参考サイト

関連記事