反馈已提交

网络繁忙

JS实现日期控件查询天数控制

  • 文档创建者:橙子超人
  • 编辑次数:16次
  • 最近更新:RosieY 于 2021-11-18
  • 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+"'")}

    Snag_659518b.png

    2.2 模板设计

    1)如下图设计报表样式

    2)进入参数面板编辑界面,将参数 start_time 和 end_time 添加到参数面板,绑定日期控件。

    Snag_65c3dc5.png

    2.3 设置点击事件

    选中参数面板的查询按钮,添加 JS 点击事件:

    Snag_66cd9b9.png

    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 效果预览

    保存报表,点击分页预览,效果如下图所示:

    1.gif

    注:不支持移动端,H5 端实现该功能参见文档:移动端日期筛选控制

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\日期控件查询天数控制.cpt

    点击下载模板:日期控件查询天数控制.cpt

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭