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

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

具体效果图以下：

能够看出会报出以下错误。

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

给查询按钮增长点击事件，具体的JS代码以下： 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;
}

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浏览器版本中，判断两个日期之间的差值的警告框则不会起做用。能够换用如下代码：

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

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