26
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【jQuery】datetimepicerプラグイン

Last updated at Posted at 2015-06-03

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

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(){}
26
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?