Web报表工具JS开发之日期校验 Web前端报表javascript前端开发

在报表开发过程中，我们常常需要对查询界面进行日期校验。例如有两个参数：开始日期和结束日期，我们要校验的是：开始日期与结束日期不能为空，结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段内，否则提示相关信息，对此可以在查询按钮中增加事件。下面我们通过FineReport来介绍下具体的设置。

具体效果图如下：

 

可以看出会报出如下错误。

模板的设计工作这边就不重点讲了，设定好如下的模板界面：

 

给查询按钮增加点击事件，具体的JS代码如下：

 

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;
}

 

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

设置完查看模板，选择开始时间和结束时间，使这两个日期之间相差超过15天，就会弹出上述对话框。

因为FineReport的报表界面是在前段展示，我特地把各种浏览器试了个遍。刚刚上述的js代码在火狐，谷歌IE9等浏览器下没有问题，但是在IE8以及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;  
}