在做項目的時候需要用到日期的控件,之前用的是H5的input type="date"標籤,考慮到兼容性的問題換了時間控件
剛好看到了datetimepicker,學習了一下,也再次做個簡單的筆記,進入正文
首先引入css
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
引入js,因爲它支持多語言,所以我引入的是中文
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
//年月日的時間配置(屬性都有註釋,常用的屬性基本都在下面)
$('.form_datetime').datetimepicker({
language: 'zh-CN', //語言類型
weekStart: 1,//一週從哪一天開始
todayBtn:1, // 當天日期按鈕``
autoclose: 1,//選完時間後是否自動關閉
todayHighlight: 1,//當天日期高亮
startView: 2,
forceParse: 0,
showMeridian: 1,
maxView:4, //最高顯示到年份
minView:2, //最低顯示到日
startDate: getCurrentDate(), //這個時間之前的不能再選擇
endDate:getCurrentDate(), //這個時間後面的不能再選擇
initialDate: new Date(),//初始化當前日期
format: 'yyyy-mm-dd',//時間格式
pickerPosition:'bottom-right'//選擇框位置
});
// 年月日 時分秒
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minuteStep:1,//分鐘間隔爲1
maxView:4, //最高顯示到年份
minView:0, //最低顯示到日
forceParse: 0,
format: 'yyyy-mm-dd hh:ii:ss'
});
```
//時分秒
$('.form_time').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0,
minuteStep:1,//分鐘間隔爲1
showMeridian:false,//是否顯示上下午
format:'hh:ii:ss'
});
```
不過使用上面的配置還是會出現一些問題,在使用時分秒的時候你會發現,並沒有秒的選擇(沒有出現秒的下拉框),
那你就需要修改它的源碼了,修改源碼如下:
添加下拉框,找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))這句
//添加datetimepicker下拉框,如果配置要選擇秒,否則不添加
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);
//修改容器點擊事件。增加下面的紅色語句,防止選擇select秒鐘時日期彈出框隱藏
click: function (e) {
e.stopPropagation();
e.preventDefault();
//防止選擇秒鐘選擇器日期控件層隱藏
if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;
然後繼續往下找到case 'span'語句,修改裏面秒鐘獲取方式,如下所示:
case 'span':
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添加秒鐘選擇下拉框功能
到此爲止,也就實現了datetimepicker的基本用法(ps:源碼部分的修改是我在遇到這個問題的時候
從網上搜到的)