记录开发中使用WdatePicker日期控件minDate和maxDate实现日期校验
1 使用控件之前导入js文件
2 校验实现
1)直接在标签静态校验
开始日期文本输入框:
<input id="start_time" class="form-control sip-finput" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:\'%y-%M-%d\',maxDate:$(\'#end_time\').val(),position:{left:150,top:0}})" data-rule="required;">
结束日期文本输入框:
<input class="form-control" type="text" id="end_time">
2)文本框onClick单击事件动态校验(使用场景:当开始日期、结束日期最大、最小时间不是相互约束,受制于其他日期、校验比较复杂时使用)
举例:如业务需求中,主表、子表都存在开始、结束时间,当主表起始时间无非空校验时,子表起始时间分别受制于主表起始时间;
**以下代码以子表结束时间的起始校验为例:主表起始 日期有校验前提下,主表结束日期为空,子表开始时间不小于当前时间;不为空,子表minDate小于主表开始日期;
如以上两个文本框是主表时间:
以下为子表起始日期输入框:
<input class="form-control" type="text" id="sub_start_time" onClick="checkStartTime()">
<input class="form-control" type="text" id="sub_end_time" onClick="checkEndTime()">
// 非空校验,当指定值有数据时 返回ture 否则返回false
function checkValues(_value){
if(_value==undefined || _value=='' || _value==null){
return false;
}else{
return true;
}
}
function checkStartTime(){
//参数声明
var sub_start_time= $('#sub_start_time').val(),start_time= $('#start_time').val(),end_time= $('#end_time').val(),_params = {dateFmt:'yyyy-MM-dd',position:{left:150,top:160}};
if(checkValues(start_time)){ //主表开始时间不为空
_params.minDate = start_time;
}else{
_params.minDate = '%y-%M-%d';
}
if(checkValues(end_time)){ //主表结束时间不为空,子表maxDate小于主表结束时间
_params.maxDate = _end_time;
}
WdatePicker(_params); //调用WdatePicker.js参数设置方法
}
3)控件常用属性说明:
dateFmt:设置选择日期格式
position:调整控件在页面中位置
minDate:’%y-%m-%d’:最小日期定义为当前日期
maxDate:$("#end_time").val():小于结束日期
\:特殊符号转义