JS实现日期控件校验

编辑
  • 文档创建者:印然
  • 浏览次数:9520次
  • 编辑次数:12次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

    内置参数查询界面当中可进行一些数据校验,例如有两个参数:开始日期和结束日期,下面我们要校验的是:

    1.开始日期与结束日期不能为空,结束日期必须在开始日期之后

    2.结束日期必须在开始日期后的某个时间段内,否则提示相关信息

    对此可以在查询按钮中增加事件。下面介绍下具体的设置。

    具体效果图如下:


    2. 思路

    通过 this.options.form.getWidgetByName("starttime").getValue() 获取两个日期控件值,利用 JavaScript 实现日期校验。

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

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

    注:上述 JavaScript 代码在火狐,谷歌 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;  
    }

    移动端做日期校验,将原来的查询控件设置为不可见,新添加一个按钮控件,修改控件名称为查询,使用下面的 JavaScript 代码:


    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 天,就会弹出上述对话框。

    3.4 单元格填报控件

    若使用单元格填报日期控件,在单元格中添加日期控件,设置控件名为 starttime,将格式改为时间型:


    结束日期控件同理,将控件名改为 endtime。

    将代码中的 this.options.form.getWidgetByName("starttime")修改为c ontentPane.getWidgetByName("starttime"),如下:


    JavaScript 代码如下:


    var start = contentPane.getWidgetByName("starttime").getValue();
    var end = contentPane.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;
    }

    4. 预览效果

    4.1 PC 端预览效果

    1)参数面板日期控件校验

    222

    2)单元格填报日期控件校验


    4.2 移动端预览效果

    1)App 预览效果

    注:App 不支持时间差校验。


    2)H5 预览效果

    5. 已完成模板

    模板效果在线查看请点击:JS实现日期控件校验.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\18-JS实现日期控件校验.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]