OA WdatePicker限制日期按钮选择范围
程序员文章站
2024-01-27 17:09:52
...
功能说明:
流程表单填写时,需要限制某个日期字段,只能选择的日期范围,不能选择的日期显示为灰色,并且不能点击
需求分析:
表单模板中插入代码块中添加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日以后的日期