$('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 += ' '; } table.html(html); } $('#datetimepicker5').datetimepicker({ format : 'hh:mm:ss', pickDate : false });' + padLeft(c, 2, '0') + ' '; } else{ html += '' } current += minutesRange; } html += '