Example1

Bootstrap Datetime Picker の使用例

$('#datetimepicker1').datetimepicker({
	format : 'yyyy/MM/dd hh:mm:ss'
});

Example2

日付ピッカーとして使用し、日付を選択した時にダイアログを閉じるようにする

var api = $('#datetimepicker2').datetimepicker({
	format : 'yyyy/MM/dd',
	pickTime : false
}).data('datetimepicker');

api.widget.on('click','td.day',function(){
	api.hide();
});

Example3

日本語表示にする

$.extend($.fn.datetimepicker.dates , {
	ja: {
		days: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
		daysShort: ['日', '月', '火', '水', '木', '金', '土', '日'],
		daysMin: ['日', '月', '火', '水', '木', '金', '土', '日'],
		months: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
		monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
	}
});
$('#datetimepicker3').datetimepicker({
	format : 'yyyy/MM/dd hh:mm:ss',
	language : 'ja'
});

Example4

時刻ピッカーの秒を非表示にする

var api = $('#datetimepicker4').datetimepicker({
	format : 'hh:mm',
	pickDate : false
}).data('datetimepicker');
api.widget.find('.timepicker-picker tr').each(function(){
	var td = $(this).find('td');
	td.eq(3).hide();
	td.eq(4).hide();
});

Example5

分の選択画面の時間間隔を変更する(例では5分間隔)

$.fn.datetimepicker.Constructor.prototype.fillMinutes = function(){
	var minutesRange = 5;
	var minutesX = 4;

	function padLeft(s, l, c) {
		if (l < s.length) return s;
		else return Array(l - s.length + 1).join(c || ' ') + s;
	}
	var hour = 60;
	var minutesCol = Math.floor((hour - 1) / minutesRange);
	var minutesY = Math.ceil(minutesCol / minutesX);
	var table = this.widget.find('.timepicker .timepicker-minutes table');
	table.parent().hide();
	var html = '';
	var current = 0;
	for (var i = 0; i < minutesY; i++) {
		html += '';
		for (var j = 0; j < minutesX; j += 1) {
			if(current < hour){
				var c = current.toString();
				html += '' + padLeft(c, 2, '0') + '';
			}
			else{
				html += ''
			}
			current += minutesRange;
		}
		html += '';
	}
	table.html(html);
}
$('#datetimepicker5').datetimepicker({
	format : 'hh:mm:ss',
	pickDate : false
});