勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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

 

サンプル

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

 

ソース

<script type="text/javascript" src="http://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

  関連記事

PHPとSQLiteでi-mobileのデータをグラフ化

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

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

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

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

leaflet.jsとOSMで現在地の取得

leaflet.jsとOpenStreetMapで現在位置を取得しマップ上にマー ...