重慶分公司
重慶分公司
在做項(xiàng)目的時(shí)候需要用到日期的控件，之前用的是H5的input type="date"標(biāo)簽，考慮到兼容性的問題換了時(shí)間控件
剛好看到了datetimepicker，學(xué)習(xí)了一下，也再次做個(gè)簡單的筆記，進(jìn)入正文
首先引入css
引入js，因?yàn)樗С侄嗾Z言，所以我引入的是中文
//年月日的時(shí)間配置（屬性都有注釋，常用的屬性基本都在下面）
$('.form_datetime').datetimepicker({
language: 'zh-CN', //語言類型
weekStart: 1,//一周從哪一天開始
todayBtn:1, // 當(dāng)天日期按鈕``
autoclose: 1,//選完時(shí)間后是否自動(dòng)關(guān)閉
todayHighlight: 1,//當(dāng)天日期高亮
startView: 2,
forceParse: 0,
showMeridian: 1,
maxView:4, //最高顯示到年份
minView:2, //最低顯示到日
startDate: getCurrentDate(), //這個(gè)時(shí)間之前的不能再選擇
endDate:getCurrentDate(), //這個(gè)時(shí)間后面的不能再選擇
initialDate: new Date(),//初始化當(dāng)前日期
format: 'yyyy-mm-dd',//時(shí)間格式
pickerPosition:'bottom-right'//選擇框位置
});
// 年月日 時(shí)分秒
$('.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'
});```
//時(shí)分秒
$('.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'
});
```
不過使用上面的配置還是會(huì)出現(xiàn)一些問題，在使用時(shí)分秒的時(shí)候你會(huì)發(fā)現(xiàn)，并沒有秒的選擇(沒有出現(xiàn)秒的下拉框)，
那你就需要修改它的源碼了，修改源碼如下：
添加下拉框，找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))這句
//添加datetimepicker下拉框，如果配置要選擇秒，否則不添加
var addSec = /,s{1,2},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '';
}
this.picker.find('.datetimepicker-minutes td').html(html.join('') + sSec);
//修改容器點(diǎn)擊事件。增加下面的紅色語句，防止選擇select秒鐘時(shí)日期彈出框隱藏
click: function (e) {
e.stopPropagation();
e.preventDefault();
//防止選擇秒鐘選擇器日期控件層隱藏
if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return；
然后繼續(xù)往下找到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添加秒鐘選擇下拉框功能
到此為止，也就實(shí)現(xiàn)了datetimepicker的基本用法（ps:源碼部分的修改是我在遇到這個(gè)問題的時(shí)候
從網(wǎng)上搜到的）另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
