在报表开发过程中,我们常常需要对查询界面进行日期校验。例如有两个参数:开始日期和结束日期,我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段内,否则提示相关信息,对此可以在查询按钮中增加事件。下面我们通过FineReport来介绍下具体的设置。

具体效果图如下:

可以看出会报出如下错误。

模板的设计工作这边就不重点讲了,设定好如下的模板界面:

给查询按钮增加点击事件,具体的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;
}

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

设置完查看模板,选择开始时间和结束时间,使这两个日期之间相差超过15天,就会弹出上述对话框。

因为FineReport的报表界面是在前段展示,我特地把各种浏览器试了个遍。刚刚上述的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;
}

Web报表工具JS开发之日期校验的更多相关文章

  1. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  2. web报表工具FineReport常用函数的用法总结(日期和时间函数)

    web报表工具FineReport常用函数的用法总结(日期和时间函数) 说明:凡函数中以日期作为参数因子的,其中日期的形式都必须是yy/mm/dd.而且必须用英文环境下双引号(" " ...

  3. web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数)

    web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数) 说明:凡函数中以日期作为參数因子的,当中日期的形式都必须是yy/mm/dd.并且必须用英文环境下双引號(" & ...

  4. web报表工具FineReport最经常用到部分函数详解

    之前分别列出来了finereport常用的文本.时间函数的解释,这里应广大朋友的要求,整理了finereport最常用到的一些函数! SUM SUM(number1,number2,-):求一个指定单 ...

  5. 开源报表工具太复杂?不如用这款免费web报表工具

    随着信息系统的高速发展,报表平台逐渐成为了信息系统当中最为核心和重要的功能模块.报表工具有助于将原始数据可视化显示,使决策者或者相关人员能够一览整体的数据趋势,完整的报表解决方案会提供多样的表格数据展 ...

  6. web报表工具FineReport使用中遇到的常见报错及解决办法(二)

    web报表工具FineReport使用中遇到的常见报错及解决办法(二) 这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘 ...

  7. web报表工具Stimulsoft Reports.Web在mvc项目中使用

    Stimulsoft Reports.Web,是一款可以直接在Web中编辑报表的报表工具 web项目技术框架mvc4+easyui+knockoutjs 1.在项目中添加引用 Stimulsoft.B ...

  8. 国内专业web报表工具,完美解决中国式报表难题

    近几年报表工具的热度不断上升,很多企业都用上了全新的报表工具,主要是企业数据化转型已经成为趋势.在进行选型的时候,很多企业最好都选择国内的报表工具,相信一些人不知道为什么国内的报表工具表现比国外的好. ...

  9. Web报表工具FineReport中JavaScript的使用

    报表软件FineReport采用的是jQuery v1.9.2框架,jQuery是一个快速的,简洁的JavaScript库,能让用户更方便地处理HTML documents.events,实现动画效果 ...

随机推荐

  1. Asp.net mvc返回Xml结果,扩展Controller实现XmlResult以返回XML格式数据

    我们都知道Asp.net MVC自带的Action可以有多种类型,比如ActionResult,ContentResult,JsonResult……,但是很遗憾没有支持直接返回XML的XmlResul ...

  2. 使用SignalR实现即时通讯功能

    教程简介 SignalR的好处是可以让多个客户端之间进行互动,比如这篇教程就展示了当你在页面上拖动矩形方块的同时,其它打开这个页面的用户也将会看到你拖动的轨迹以及最终的结果,当然他们也可以通过拖动该方 ...

  3. 基础笔记(三):网络协议之Tcp、Http

    目录 一.网络协议 二.TCP(Transmission Control Protocol,传输控制协议) TCP头格式 TCP协议中的三次握手和四次挥手 TCP报文抓取工具 三.HTTP(Hyper ...

  4. 将GridView数据导入到excel,并提供下载

    之前项目中需要一个导出数据到Excel的功能,现在将代码记录下来.其实将girdView中的数据导出的代码很简单,如下: ) { Response.Charset="GB2312" ...

  5. 背水一战 Windows 10 (13) - 绘图: Stroke, Brush

    [源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...

  6. linux 安装rz sz命令

    wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz tar zxvf lrzsz-0.12.20.tar.gz cd lrzsz-0.1 ...

  7. Java集合概述

    容器,是用来装东西的,在Java里,东西就是对象,而装对象并不是把真正的对象放进去,而是指保存对象的引用.要注意对象的引用和对象的关系,下面的例子说明了对象和对象引用的关系. String str = ...

  8. jgGrid中的editrules使用函数来进行验证

    jgGrid中的editrules 用于设置一些用于可编辑列的colModel的额外属性,大多数的时候是用来在提交到服务器之前验证用户的输入合法性的.比如editrules:{edithidden:t ...

  9. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  10. JAVA 设计模式 桥接模式

    用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构