【jQuery】datetimepicerプラグイン #jQuery

カレンダーを表示するプラグイン。
テキストをクリックするとカレンダーが表示されてそこで日付を選択する。

jQueryUIやbootstrapに似た名前のがあるけど、xdsoftというところが出している。

使い方

githubからプラグイン本体とCSSをダウンロードして読み込み。

読み込み

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

html

<input id="datetimepicker" type="text" >

jQuery

$('#datetimepicker').datetimepicker();

各種オプション

何ができるかは公式ドキュメントや、HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較などを参照すると良いかもしれない。

オプションは、パラメータにオブジェクト形式で渡す。

カレンダー選択後、テキストに設定される日付の形式

format:'Y/m/d'

時刻のみカレンダー。デフォルトはtrue。

datepicker:false

日付のみカレンダー。デフォルトはtrue。

timepicker:false

選択可能な時刻

allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
]

時間の間隔を1時間以外にする場合は、stepで指定する。

step:30

日付を選択したらカレンダーを閉じる。

closeOnDateSelect:true

日付選択時のコールバック

onSelectDate:function(){}