反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现日期控件校验

  • 文档创建者:lu123
  • 历史版本:18
  • 最近更新:RosieY 于 2022-03-14
  • 1. 概述

    1.1 问题描述

    参数查询时,可以对控件值做一些简单校验,如不能为空,当需要一些复杂校验时,设计器自带的校验规则就无法满足了。例如有两个参数:开始日期和结束日期,校验规则为:

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

    2)结束日期必须在开始日期后的某个时间段内,否则给出提示

    效果如下图所示,这该如何实现呢?

    222

    1.2 实现思路

    通过给「查询按钮」控件添加 JS 实现。利用 this.options.form.getWidgetByName("starttime").getValue() 获取到两个日期控件的值,然后对获取的日期值进行校验。

    2. 示例

    2.1 准备模板

    准备内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt

    点击可下载模板:TimeScale.cpt

    模板参数界面如下图所示:

    222

    2.2 添加事件

    点击「查询按钮」,为其添加一个「点击」事件,如下图所示

    image.png

    JavaScript 代码如下:

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

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

    在 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();
    }

    2.3 效果预览

    保存模板,点击「分页预览」,选择开始时间和结束时间,使这两个日期之间相差超过 15 天,就会弹出校验对话框。如下图所示:

    注:不支持移动端,移动端示例可参考:[HTML5]JS 控制日期控件可查询天数

    222

    3. 示例拓展

    若为单元格日期控件,也可以使用此方法进行校验。效果如下图所示:

    222

    3.1 准备模板

    新建模板,在单元格中添加「日期控件」,设置控件名为 starttime、endtime,格式改为时间型,并添加一个按钮控件。如下图所示:

    image.png

    3.2 添加事件

    点击「按钮控件」,为其添加一个「点击」事件,如下图所示:

    image.png

    JavaScript 代码如下:

    相比较参数面板中「按钮控件」的JS,只需要将 this.options.form.getWidgetByName("starttime") 修改为contentPane.getWidgetByName("starttime") 。

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

    3.3 效果预览

    保存模板,点击「填报预览」,效果如下图所示:

    注:不支持移动端,移动端示例可参考:[HTML5]JS 控制日期控件可查询天数

    222

    4. 模板下载

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

    点击下载模板:18-JS实现日期控件校验.cpt

    附件列表


    主题: 参数应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

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

    总裁办24H投诉

    热线电话:173-1278-1526