后台管理系统查询页记录往往伴随着时间间距的查询,而如何对查询时间进行取值限制则涉及到开始,结束时间的联动
官方实例
代码
<span class="datetxt">开始日期:</span><input type="text" class="dateinput dateicon" id="inpstart" readonly>
<span class="datetxt">结束日期:</span><input type="text" class="dateinput dateicon" id="inpend" readonly>
<script type="text/javascript">
var start = {}, end = {};
jeDate('#inpstart',{
format: 'YYYY-MM-DD hh:mm:ss',
minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
maxDate: function (that) {
//that 指向实例对象
return jeDate.valText(that.valCell) == "" ? jeDate.nowDate({DD:0}) : start.maxDate;
}, //设定最大日期为当前日期
donefun: function(obj){
end.minDate = obj.val; //开始日选好后,重置结束日的最小日期
jeDate("#inpend",LinkageEndDate(false));
}
});
jeDate('#inpend',LinkageEndDate);
function LinkageEndDate(istg) {
return {
trigger : istg || "click",
format: 'YYYY-MM-DD hh:mm:ss',
minDate: function (that) {
//that 指向实例对象
var nowMinDate = jeDate.valText('#inpstart') == "" && jeDate.valText(that.valCell) == "";
return nowMinDate ? jeDate.nowDate({DD:0}) : end.minDate ;
}, //设定最小日期为当前日期
maxDate: '2099-06-16 23:59:59', //设定最大日期为当前日期
donefun: function(obj){
start.maxDate = obj.val; //将结束日的初始值设定为开始日的最大日期
}
};
}
</script>
效果:
实际项目需求:这种效果其实是达到了功能需求的,对开始时间限制在当前日期之前或者是后面结束时间之前,而对结束时间限制在当前时间之前和开始时间之后。但是有一点不好的地方就是刚出来页面的时候输入框没有时间,然后我查找api加上了isinitVal:true,
,也就是默认时间。
效果:
咦,发现是不是出现了默认时间呢,默认时间为当前时间,但是,我在点击的时候竟然出不来日期选择框,同时f12
报错了
然后我细细观察,一个一个options
去除观察效果,发现了这里:
maxDate: function (that) {
//that 指向实例对象
return jeDate.valText(that.valCell) == "" ? jeDate.nowDate({DD:0}) : start.maxDate;
},
和这里
minDate: function (that) {
//that 指向实例对象
var nowMinDate = jeDate.valText('#inpstart') == "" && jeDate.valText(that.valCell) == "";
return nowMinDate ? jeDate.nowDate({DD:0}) : end.minDate ;
},
是因为在初始化的时候start.maxDate
和 end.minDate
不存在的。
然后我改了一下让他不仅不会出这种问题同时还符合我当前的功能需求
jeDate('#inpstart',{
theme:{bgcolor:"#4aa5ff",pnColor:"#00DDAA"},
format: 'YYYY-MM-DD hh:mm:ss',
minDate: '1971-01-01 00:00:00', //设定最小日期
onClose:false,
isinitVal:true,
maxDate:function (that) {
//that 指向实例对象
var nowMaxDate = ""?jeDate.nowDate({DD:0}):$('#inpend').val();
return nowMaxDate
}, //设定最大日期为当前日期
donefun: function(obj){
jeDate("#inpend",LinkageEndDate(false));
}
});
jeDate('#inpend',LinkageEndDate);
function LinkageEndDate(istg) {
return {
trigger : istg || "click",
theme:{bgcolor:"#4aa5ff",pnColor:"#00DDAA"},
format: 'YYYY-MM-DD hh:mm:ss',
onClose:false,
isinitVal:true,
minDate: function (that) {
var nowMinDate = ""?jeDate.nowDate({DD:0}):$('#inpstart').val();
return nowMinDate;
}, //设定最小日期为当前日期
maxDate: jeDate.nowDate({DD:0}) , //设定最大日期为当前日期
};
}
效果
至此,ok!也算是一个小坑吧,不过我倒是发现jeui
还挺不错的,两个独立组件都挺好的;
官网:jeui