導包:

<link rel="stylesheet" href="../../../css/mui.picker.min.css" />
<script src="../../../js/mui.picker.min.js"></script>

rel="stylesheet"此屬性必須要,否則格式會錯誤

<!--日期選擇器-->
<div class="bgc" style="width: 100%;margin-bottom: -9px;">
<button id='demo1' data-options='{"type":"date"}' class="btn" style="width: 47%;border:none;">...</button>
<span style="width: 6%;line-height:30px;">~</span>
<button id='demo2' data-options='{"type":"date"}' class="btn" style="width: 47%;border:none;">...</button>
</div>

//點擊--選擇時間
var btns = mui('.btn');
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var _self = this;
if(_self.picker) {
_self.picker.show(function (rs) {
_self.innerText = rs.text;
_self.picker.dispose();
_self.picker = null;
});
} else {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
_self.picker = new mui.DtPicker(options);
_self.picker.show(function(rs) {
_self.innerText = rs.text;
_self.picker.dispose();
_self.picker = null;
});
}
}, false);
});

//獲取當前時間段
function getDates(nowDate){
var firstDate = nowDate;
firstDate.setDate(1); //第一天
var nowMonthfirstday = firstDate.getFullYear()+"-"+(firstDate.getMonth()+1)+"-"+firstDate.getDate();
var endDate = new Date(firstDate);
endDate.setMonth(firstDate.getMonth()+1);
endDate.setDate(0);
var nowMonthendday = endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate();
//與當前日期作對比,如果查詢?nèi)掌谑潜灸瓯驹?則默認的結(jié)束日期為今天
var gdndate = new Date();
if(gdndate.getFullYear()==nowDate.getFullYear()&&gdndate.getMonth()==nowDate.getMonth()){
nowMonthendday = gdndate.getFullYear()+"-"+(gdndate.getMonth()+1)+"-"+gdndate.getDate();
}
document.getElementById('demo1').innerText = nowMonthfirstday;
document.getElementById('demo2').innerText = nowMonthendday;
}

轉(zhuǎn)載于:https://www.cnblogs.com/mangwusuozhi/p/9258664.html

總結(jié)

以上是生活随笔為你收集整理的时间控件,选择日期的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。