$('div.datetimepicker').datetimepicker();
Bootstrap Datetime Picker の使用例
$('#datetimepicker1').datetimepicker({
format : 'yyyy/MM/dd hh:mm:ss'
});
日付ピッカーとして使用し、日付を選択した時にダイアログを閉じるようにする
var api = $('#datetimepicker2').datetimepicker({
format : 'yyyy/MM/dd',
pickTime : false
}).data('datetimepicker');
api.widget.on('click','td.day',function(){
api.hide();
});
日本語表示にする
$.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'
});
時刻ピッカーの秒を非表示にする
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();
});
分の選択画面の時間間隔を変更する(例では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
});