时间控件,选择日期

导包:

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

rel="stylesheet"此属性必须要,否则格式会错误

<!--日期选择器-->
<div class="bgc" style=" 100%;margin-bottom: -9px;">
<button id='demo1' data-options='{"type":"date"}' class="btn" style=" 47%;border:none;">...</button>
<span style=" 6%;line-height:30px;">~</span>
<button id='demo2' data-options='{"type":"date"}' class="btn" style=" 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();
//与当前日期作对比,如果查询日期是本年本月,则默认的结束日期为今天
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;
}