欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-27 17:09:52
...

功能说明:

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

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、给日期字段设置自定义属性:(属性说明,后面有详细配置演示)

  classdatelimit

 

  自定义属性:

  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,代表上限为当前日期的五天内,下限不做限制

   下限配置方式与上限相同

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

2. 上限限制类型为2,关联日期字段id7863,值为5,代表上限是:

  id7863的日期字段选择的日期的五天内,下限不做限制

  当限制类型为2时,需给关联的日期字段添加自定义属性:classdatelimitcondition

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

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

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

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

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

 

 

 

相关标签: 日期控件 oa