原文鏈接:bootstrap datetimepicker添加秒鐘選擇下拉框
bootstrap datetimepicker插件沒有秒鐘選擇器,如果要想選擇的時間精確到秒沒有辦法控制,雖然可以配置format:'yyyy-mm-dd hh:ii:ss',會將秒鐘添加到輸入框中,但是無法控制秒鐘數值,默認爲當前客戶端的時間的秒鐘。
本示例修改bootstrap datetimepicker源代碼,如果配置了顯示秒鐘format:'......ss',將會給分鐘選擇器層添加秒鐘選擇下拉框,可以自定義選擇時間的秒鐘部分,效果如下
bootstrap datetimepicker添加秒鐘選擇下拉框步驟
1)添加下拉框,找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))這句,大概在709行附近,改爲下面的
JavaScript
代碼var addSec = /,s{1,2},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '<select style="width:100%">' : '';
this.addSec = addSec;
if (addSec) {
var orgSec = this.viewDate.getSeconds();
for (var _i = 0; _i < 60; _i++) sSec += '<option value="' + _i + '"' + (_i == orgSec ? ' selected' : '') + '>' + (_i < 10 ? '0' : '') + _i + '</option>';
sSec += '</select>';
}
this.picker.find('.datetimepicker-minutes td').html(html.join('') + sSec);
2)修改容器點擊事件。大概846行,增加下面的紅色語句,防止選擇select秒鐘時日期彈出框隱藏
JavaScript
代碼e.stopPropagation();
e.preventDefault();
///防止選擇秒鐘選擇器日期控件層隱藏
if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;
3)然後繼續往下找到case 'span'語句,大概916,修改裏面秒鐘獲取方式,如下所示
JavaScript
代碼if (!target.is('.disabled')) {
var year = this.viewDate.getUTCFullYear(),
month = this.viewDate.getUTCMonth(),
day = this.viewDate.getUTCDate(),
hours = this.viewDate.getUTCHours(),
minutes = this.viewDate.getUTCMinutes(),
//修改datetimepicker秒鐘獲取方式
seconds = this.addSec ? this.picker.find('select').val() : this.viewDate.getUTCSeconds();
到此完成bootstrap datetimepicker添加秒鐘選擇下拉框功能。點擊這裏下載修改過的bootstrap-datetimepicker.js文件
注意:一定要配置format顯示秒鐘纔會顯示秒鐘下拉框,否則不顯示
-收縮JavaScript
代碼$('.form_datetime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
format: 'yyyy-mm-dd hh:ii:ss'///
});
收藏備份