JS实现日期控件校验

1.1 版本

1.2 问题描述

参数查询时，可以对控件值做一些简单校验，如不能为空，当需要一些复杂校验时，设计器自带的校验规则就无法满足了。例如有两个参数：开始日期和结束日期，校验规则为：

1）开始日期与结束日期不能为空，结束日期必须在开始日期之后

2）结束日期必须在开始日期后的某个时间段内，否则给出提示

效果如下图所示，这该如何实现呢？

1.3 实现思路

通过给「查询按钮」控件添加 JS 实现。利用 this.options.form.getWidgetByName("starttime").getValue() 获取到两个日期控件的值，然后对获取的日期值进行校验。

2.1 准备模板

准备内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt

点击可下载模板：TimeScale.cpt

模板参数界面如下图所示：

2.2 添加事件

点击「查询按钮」，为其添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

注：虽然参数控件中也可以设置校验，但是参数控件要点击控件后才能进行校验，因此参数界面的不能为空以及比较校验需要在查询按钮中设置。

var start = this.options.form.getWidgetByName("starttime").getValue();  
var end = this.options.form.getWidgetByName("endtime").getValue();  
if( start == "" || start==null){  //判断开始日期是否为空
  alert("错误,开始时间不能为空");   //开始日期参数为空时提示
  return false;  
};  
if(end == "" || end==null){  //判断结束日期是否为空
  alert("错误,结束时间不能为空");   //结束日期参数为空时提示
  return false;  
};  
if( start > end){   //判断开始日期是否大于结束日期
  alert("错误,开始时间不能大于结束时间");   //开始日期大于结束日期时提示  
  return false;  
}
var startdate = new Date(start);   //将开始日期转化为Date型
var enddate = new Date(end);    //将结束日期转化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   //将两个日期相减得出的毫秒数转化为天数
if(subdate>15){    //判断结束日期是否超过开始日期后15天
alert("错误,结束日期必须在开始日期15天之内");    //结束日期超过开始日期后的十五天时提示
return false;
}

在 IE8 及以下的 IE 浏览器使用时，若判断两个日期之间的差值的警告框不起作用。可用以下代码：

var start = this.options.form.getWidgetByName("starttime").getValue();    
var end = this.options.form.getWidgetByName("endtime").getValue();    
if( start == "" || start==null){  //判断开始日期是否为空  
  alert("错误,开始时间不能为空");   //开始日期参数为空时提示  
  return false;    
};    
if(end == "" || end==null){  //判断结束日期是否为空  
  alert("错误,结束时间不能为空");   //结束日期参数为空时提示  
  return false;    
};    
if( start > end){   //判断开始日期是否大于结束日期  
  alert("错误,开始时间不能大于结束时间");   //开始日期大于结束日期时提示    
  return false;    
}  
var aDate  =  start.split("-")  
var startdate =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为MM-dd-yyyy格式  
alert(startdate);
var aDate  =  end.split("-")  
var enddate  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
alert(enddate);
var subdate=  ((enddate  -  startdate)  /1000/  60/60/24)    //把相差的毫秒数转换为天数  
alert(subdate);
if(subdate>15){    //判断结束日期是否超过开始日期后15天  
alert("错误,结束日期必须在开始日期15天之内");    //结束日期超过开始日期后的十五天时提示  
return false;  
}

移动端 JavaScript 代码如下：

var start = this.options.form.getWidgetByName("starttime").getValue();
var end = this.options.form.getWidgetByName("endtime").getValue();
var startdate = new Date(start); //将开始日期转化为Date型
var enddate = new Date(end); //将结束日期转化成Date型
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将两个日期相减得出的毫秒数转化为天数
if(start == "" || start == null) { //判断开始日期是否为空
    alert("错误,开始时间不能为空");
} else if(end == "" || end == null) { //判断结束日期是否为空
    alert("错误,结束时间不能为空");
} else if(start > end) { //判断开始日期是否大于结束日期
    alert("错误,开始时间不能大于结束时间");
} else if(subdate > 15) { //判断结束日期是否超过开始日期后15天
    alert("错误,结束日期必须在开始日期15天之内");
} else {
    _g().parameterCommit();
}

2.3 效果预览

保存模板，点击「分页预览」，选择开始时间和结束时间，使这两个日期之间相差超过 15 天，就会弹出校验对话框。如下图所示：

注：不支持移动端，移动端示例可参考：［HTML5］JS 控制日期控件可查询天数

若为单元格日期控件，也可以使用此方法进行校验。效果如下图所示：

3.1 准备模板

新建模板，在单元格中添加「日期控件」，设置控件名为 starttime、endtime，格式改为时间型，并添加一个按钮控件。如下图所示：

3.2 添加事件

点击「按钮控件」，为其添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

相比较参数面板中「按钮控件」的JS，只需要将 this.options.form.getWidgetByName("starttime") 修改为_g().getWidgetByName("starttime")。

var start = _g().getWidgetByName("starttime").getValue();
var end = _g().getWidgetByName("endtime").getValue();
if (start == "" || start == null) { //判断开始日期是否为空
alert("错误,开始时间不能为空"); //开始日期参数为空时提示
return false;
};
if (end == "" || end == null) { //判断结束日期是否为空
alert("错误,结束时间不能为空"); //结束日期参数为空时提示
return false;
};
if (start > end) { //判断开始日期是否大于结束日期
alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示  
return false;
}
var startdate = new Date(start); //将开始日期转化为Date型
var enddate = new Date(end); //将结束日期转化成Date型
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将两个日期相减得出的毫秒数转化为天数
if (subdate > 15) { //判断结束日期是否超过开始日期后15天
alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示
return false;
}

3.3 效果预览

保存模板，点击「填报预览」，效果如下图所示：

注：不支持移动端，移动端示例可参考：［HTML5］JS 控制日期控件可查询天数

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\18-JS实现日期控件校验.cpt

点击下载模板：18-JS实现日期控件校验.cpt