关于easyui-datebox日期最大默认值和起止日期验证的问题

最新推荐文章于 2021-09-30 13:09:39 发布

原创最新推荐文章于 2021-09-30 13:09:39 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在EasyUI框架中实现日期控件的最大默认值设置及起止日期的有效性验证。通过修改源码和使用自定义验证规则，可以确保日期输入符合业务逻辑需求。

起止日期验证：

首先自定义验证规则:

endDate: {
validator: function (value, param) {
var start = $(param[0]).datetimebox('getValue');
return value >= start;
},
message: '结束日期应大于等于开始日期!'
}

在页面引用自定义的验证规则：

<input type="text" name="balanceDT_B"  id="balanceDT_B" class="easyui-datebox" editable="false" >~
<input type="text" name="balanceDT_E"  id="balanceDT_E" class="easyui-datebox" data-options="validType:'endDate[\'#balanceDT_B\']'" editable="false">

data-options中validType使用我们定义的验证规则endDate，传入参数开始日期标签id。

日期最大默认值：

设置日期最大默认值需要修改源码，jquery.datebox.js和jquery.calendar.js。

打开jquery.datebox.js，找到

/**

 * if the calendar isn't created, create it.
 */

为calendar添加endDate属性，

$.extend(state.calendar.calendar('options'), {
				fit: true,
				border: false,
				endDate:opts.endDate,
				onSelect: function(date) {
					var target = this.target;
					var opts = $(target).datebox('options');
					setValue(target, opts.formatter.call(target, date));
					$(target).combo('hidePanel');
					opts.onSelect.call(target, date);
				}
			});

接着打开jquery.calendar.js，找到show方法，在循环设置日期中添加如下代码：

if (!opts.validator.call(target, dvalue)){
					cls += ' calendar-disabled';
				}
				//设置最大选择时间（默认为当前时间）,超过最大选择时间不可选
				if(!opts.endDate){
					opts.endDate = compareNow;
				}
				var endTmp = opts.endDate.split('-');
			    if((day[0] > endTmp[0]) || (day[0] == endTmp[0] && day[1]>endTmp[1]) || 
			    		(day[0]==endTmp[0] && day[1]==endTmp[1] && day[2]>endTmp[2])){
			    	cls += ' calendar-disabled';
			    }
			    /////

其中的compareNow为循环外设置的当前日期：

var compareNow = now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate();

如果要手动设置最大可选日期的话，在标签中加入data-options的endDate值。

<input type="text" name="balanceDT_B"  id="balanceDT_B" class="easyui-datebox" data-options="endDate:'2017-1-1'" editable="false" >

到此，关于easyui-datebox日期最大默认值和起止日期验证的问题就解决了。（还是97Date好用些吧。。）