您的位置：首页 > 产品设计 > UI/UE

easyui-datebox不能选择未来时间的解决方案

2015-08-14 11:03 561 查看
对于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能更好的解决日期限制问题，建议有兴趣的朋友可以去看看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航