对于easyui并未提供对日期控件的时间校验,然而有时候我们并不希望用于能选择未来的时间。下面给出两个简单的应对方案。
html文件如下:
<body>
<div style="display:inline-block;width:100px;">请选择日期:</div>
<input class="easyui-datebox" id="testDate" data-options="required:true,validType:'checkDate'"/>
</body>
方案1,通过datebox的onSelect时间重置选择的时间。
$("#testDate").datebox({
onSelect:function(date){
var nowDate = new Date();
if(date>nowDate){
$("#testDate").datebox("setValue","");
}
}
});
方案2,添加校验方法。
$.extend($.fn.datebox.defaults.rules,{
checkDate:{
validator:function(value, param){
var nowDate = new Date();
var dateList = value.split("/");
var chooseData = new Date(dateList[2],dateList[0]-1,dateList[1]);
return nowDate>=chooseData;
},
message:"不能选择未来时间"
}
});
方案2只有在datebox的input框获取焦点的时候才会显示提示,如果禁用了输入则不会生效。
jquery-ui中的datepicker能更好的解决日期限制问题,建议有兴趣的朋友可以去看看。