需求:需要通过时间限定数据的查找范围,样式如下
<div class="mui-row" style="padding: 8px 8px 0 8px;">
<div class="mui-col-sm-5" >
<input id='StartDate' type="text" class="mui-input-clear" placeholder="选择开始日期" >
</div>
<div class="mui-col-sm-1" style="text-align:center;">
<span style=" font-weight:bold;margin-top: 10px;" class="mui-icon mui-icon-arrowthinright"></span>
</div>
<div class="mui-col-sm-4">
<input id='EndDate' type="text" class="mui-input-clear contact" placeholder="选择结束日期" >
</div>
<div class="mui-col-sm-2" style="text-align: right;">
<button id="SearchButton" type="button" class="mui-btn mui-btn-primary" style="background: #17acbb;border: #17acbb;margin-top: 4px;">搜索</button>
</div>
</div>
var byId = function(id) {
return document.getElementById(id);
};
//============================================================================
//默认时间
byId('StartDate').value = defaultDate().StartDate;
byId('EndDate').value = defaultDate().EndDate;
//选择开始日期
byId('StartDate').addEventListener('tap', function() {
document.activeElement.blur();//收起虚拟键盘
var sDate = byId('StartDate').value;
var obj = {
Id: 'StartDate',
DefaultDate: sDate,
maxDate: byId('EndDate').value
}
var PickDate = constants.PickDateTap(obj);
byId('StartDate').focus();
});
//选择结束日期
byId('EndDate').addEventListener('tap', function() {
document.activeElement.blur();//收起虚拟键盘
var eDate = byId('EndDate').value;
var obj = {
Id: 'EndDate',
DefaultDate: eDate,
minDate: byId('StartDate').value
}
var PickDate = constants.PickDateTap(obj);
// byId('EndDate').focus();
});
//=== 查询按钮 =========
byId('SearchButton').addEventListener('tap', function() {
});
//日期格式的转换
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
var o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (var k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
var str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
return fmt;
}
function defaultDate() {
//debugger
var now = new Date(); //当前日期
var nowMonth = now.getMonth(); //当前月
var nowYear = now.getFullYear(); //当前年
//本月的开始时间
var StartDate = new Date(nowYear, nowMonth, 1);
//本月的结束时间
var EndDate = new Date(nowYear, nowMonth+1, 0);
var date = {
StartDate: formatDate(StartDate , 'yyyy-MM-dd'),
EndDate: formatDate(EndDate , 'yyyy-MM-dd')
};
return date
}
//================================================
/**
* 日期选择 constants.js
**/
owner.PickDateTap = function(obj){
var dDate = new Date();
if(!mui.isEmpty(obj) && !mui.isEmpty(obj.DefaultDate)) {
dDate = new Date(obj.DefaultDate);
}
var minDate = '';
if(!mui.isEmpty(obj.minDate)){
minDate = new Date(obj.minDate);
//console.log('minDate'+minDate);
}
var maxDate = '';
if(!mui.isEmpty(obj.maxDate)){
maxDate = new Date(obj.maxDate);
//console.log('maxDate'+maxDate);
}
var byId = function(id) {
return document.getElementById(id);
};
plus.nativeUI.pickDate(function(e) {
var date = formatDate(e.date , 'yyyy-MM-dd');
if(!mui.isEmpty(obj) && !mui.isEmpty(obj.Id) && !mui.isEmpty(byId(obj.Id))) {
byId(obj.Id).value = formatDate(e.date , 'yyyy-MM-dd');
}
}, function(e){
if(!mui.isEmpty(obj) && !mui.isEmpty(obj.Id) && !mui.isEmpty(byId(obj.Id))) {
byId(obj.Id).value = formatDate(dDate , 'yyyy-MM-dd');
}
}, {
title: "请选择日期",
date: dDate,
minDate: minDate,
maxDate: maxDate
});
};