历史版本16 :JS实现日期控件查询天数控制 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 版本
报表服务器版本 | 功能变更 |
---|---|
11.0 | -- |
1.2 问题描述
参数面板有 2 个日期控件,开始时间和结束时间,想要判断开始时间不能大于结束时间,且两者间隔不超过 30 天。
1.3 实现思路
在查询按钮的点击事件中,利用 JS 获取日期控件值,判断日期间隔和日期大小,如果不满足规则就弹出提示并阻止查询。接口说明可以参考:控件接口。
2. 示例编辑
2.1 数据准备
新建数据集 ds1,SQL 查询语句为:
SELECT * FROM 订单 where 1=1
${if(len(start_time)=0,""," and 订购日期>='"+start_time+"'")}
${if(len(end_time)=0,""," and 订购日期<='"+end_time+"'")}
2.2 模板设计
1)如下图设计报表样式
2)进入参数面板编辑界面,将参数 start_time 和 end_time 添加到参数面板,绑定日期控件。
2.3 设置点击事件
选中参数面板的查询按钮,添加 JS 点击事件:
JavaScript 代码如下:
var start =_g().getParameterContainer().getWidgetByName("start_time").getValue();
//获取start_time控件的值
var end = _g().getParameterContainer().getWidgetByName("end_time").getValue();
//获取end_time控件的值
if (start > end) {
alert("开始时间不能大于结束时间!");
//如果开始时间大于结束时间则提示
return false;
//阻止查询
}
var subdate = (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24);
//将开始时间和结束时间相减得出的毫秒数转化为天数
if (subdate > 30) {
alert("开始时间和结束时间相差不能大于30天!");
//如果开始时间和结束时间差了30天以上则提示
return false;
//阻止查询
}
2.4 效果预览
保存报表,点击分页预览,效果如下图所示:
注:不支持移动端,H5 端实现该功能参见文档:移动端日期筛选控制
3. 模板下载编辑
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\日期控件查询天数控制.cpt
点击下载模板:日期控件查询天数控制.cpt