OA WdatePicker限制日期按钮选择范围

功能说明：

流程表单填写时，需要限制某个日期字段，只能选择的日期范围，不能选择的日期显示为灰色，并且不能点击

 

需求分析：

表单模板中插入代码块中添加js代码，并对日期字段设置自定义属性，实现限制日期字段选择的范围，范围外的日期显示为灰色，并无法点击选择

 

代码实现：

1、将示例代码直接复制插入到代码块中

var Bus_Col = {
	// 明细表下标数，0代表第一个明细表，以此类推
	indexid : "0",
	// 明细表日期字段fieldid的数字部分
	rqfield : "6601"
};

var Bus_Fun = {
	onFlownoShowDate : "onFlownoShowDate",
	init : "init"
};
jQuery(document).ready(function() {
	var indexarr = jQuery("#indexnum" + Bus_Col.indexid).val();
	// 循环绑定已有明细数据的日期字段
	for ( var x = 0; x < indexarr; x++) {
		Bus_Fun.init(x);
	}
	// 绑定明细表的最大下标数，变化的时候代表增加条数。新增行的日期字段绑定时间
	var old_val = jQuery("#indexnum" + Bus_Col.indexid).val();
	setInterval(function() {
		var new_val = jQuery("#indexnum" + Bus_Col.indexid).val();
		if (old_val != new_val) {
			old_val = new_val;
			Bus_Fun.init(new_val * 1 - 1);
		}
	}, 100);

});

Bus_Fun.init = function(arg) {
	jQuery("#field" + Bus_Col.rqfield + "_" + arg).prev().prev().unbind('click').removeAttr('onclick').click(function() {
						Bus_Fun.onFlownoShowDate('field' + Bus_Col.rqfield
								+ "_" + arg + 'span', 'field' + Bus_Col.rqfield
								+ "_" + arg + '');
					});

};

Bus_Fun.onFlownoShowDate = function(spanname, inputname) {
	var date = new Date();
	var seperator1 = "-";
	var month = date.getMonth() + 1;
	if (month >= 1 && month <= 9) {
		month = "0" + month;
	}

	// 只能选择当月第一天及以后的数据
	var limitvalue = date.getFullYear() + seperator1 + month + seperator1 + "01";
	var returnvalue;

	var oncleaingFun = function() {
		$ele4p(spanname).innerHTML = '';
		$ele4p(inputname).value = '';
	};

	WdatePicker({
		lang : languageStr,
		minDate : limitvalue,
		el : spanname,
		onpicked : function(dp) {
			returnvalue = dp.cal.getDateStr();
			$dp.$(spanname).innerHTML = returnvalue;
			$dp.$(inputname).value = returnvalue;
		},
		oncleared : oncleaingFun
	});
};

2、给日期字段设置自定义属性：（属性说明，后面有详细配置演示）

  class：datelimit

 

  自定义属性：

  limittype_max（日期选择上限类型） :

  1（与当前日期相关，如：当前日期30天内）

  2（与另一日期字段相关，如：结束日期只能选择开始日期的7天内）

  max（不限制上限范围，上限为2099-12-31）

 

 

  limittype_min（日期选择下限类型，同上限类型）：

  1（与当前日期相关）

  2（与另一日期字段相关）

  min（不做下限限制，下限为1900-01-01）

  limitvalue_max（上限日期范围）：

  填写数字，正负皆可

  limitvalue_min（下限日期范围）：

  填写数字，正负皆可

  limitfield_max（上限选择与另一日期相关时，该日期字段id）

  limitfield_min（下限选择与另一日期相关时，该日期字段id）

 

配置演示：

1.上限限制类型为1，值为5，代表上限为当前日期的五天内，下限不做限制

   下限配置方式与上限相同

2. 上限限制类型为2，关联日期字段id为7863，值为5，代表上限是：

  id为7863的日期字段选择的日期的五天内，下限不做限制

  当限制类型为2时，需给关联的日期字段添加自定义属性：class：datelimitcondition

3.实现职能选择10日以后的日期