历史版本9 :JS实现日期控件校验 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
内置参数查询界面当中可进行一些数据校验,例如有两个参数:开始日期和结束日期,下面我们要校验的是:
1.开始日期与结束日期不能为空,结束日期必须在开始日期之后
2.结束日期必须在开始日期后的某个时间段内,否则提示相关信息
对此可以在查询按钮中增加事件。下面介绍下具体的设置。
具体效果图如下:
2. 思路编辑
通过this.options.form.getWidgetByName("starttime").getValue()获取两个日期控件值,利用js实现日期校验。
3. 操作步骤编辑
3.1 打开模板
打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt。
如下图参数界面:
3.2 增加事件
点击查询按钮,在右侧的属性面板增加点击事件:
具体的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;
}
注:虽然参数控件中也可以设置校验,但是参数控件要点击控件后才能进行校验,因此参数界面的不能为空以及比较校验需要在查询按钮中设置。
注:上述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;
}
移动端做日期校验,将原来的查询控件设置为不可见,新添加一个按钮控件,修改控件名称为查询,使用下面的js代码:
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();
}
3.3 效果查看
分页预览模板,选择开始时间和结束时间,使这两个日期之间相差超过15天,就会弹出上述对话框。
4. 预览效果编辑
4.1 PC端预览效果
4.2 移动端预览效果
1)app预览效果注:app不支持时间差校验。
5. 已完成模板编辑
模板效果在线查看请点击:JS实现日期控件校验.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\18-JS实现日期控件校验.cpt