JavaScript+HTML5实现的日期比较功能示例


Posted in Javascript onJuly 12, 2017

本文实例讲述了JavaScript+HTML5实现的日期比较功能。分享给大家供大家参考,具体如下:

这里要在前面的文章《JavaScript实现设置默认日期范围为最近40天的方法》基础之上,进一步校验开始日期、结束日期是否合理。

比如:开始日期要小于等于结束日期,还有实现只能查询最近40天内的数据(设定为:结束日期减去开始日期要小于等于41,设为40也可以,关键看需求),如果要查询超过40天的数据,会直接报错。

在报错时,不会显示具体的错误,比如:结束日期大于当天日期,或者开始日期大于当天日期。

代码:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="charset=utf8"></meta>
  <script type="text/javascript">
    //计算日期相差的天数
    function datediff(startdate,enddate)
    {
      //alert(typeof(startdate));
      //拆分字符串
      var d1 = startdate.split('-');
      var d2 = enddate.split('-');
      //重新定义2个日期
      var date1 = new Date(d1[0],d1[1],d1[2]);
      var date2 = new Date(d2[0],d2[1],d2[2]);
      //取得子1970-01-01到指定日期的毫秒数
      var dt1 = date1.getTime();
      var dt2 = date2.getTime();
      console.log(d1[0],d1[1],d1[2]);
      console.log(d2[0],d2[1],d2[2]);
      console.log(dt1,dt2,(dt2-dt1) / (24*60*60*1000));
      return (dt2-dt1) / (24*60*60*1000)
    }
    //响应查询按钮
    function query()
    {
      //先把输出内容情况
      var yy = document.getElementById("sp");
      yy.innerHTML = "";
      var date1 = document.getElementById("date1").value;
      var date2 = document.getElementById("date2").value;
      //判断开始日期是否大于结束日期
      if (date1 > date2)
      {
        alert("开始日期大于结束日期!请重新选择查询日期");
        return false;
      }
      //判断是否为最近40天的数据
      var today = dateToString(new Date());
      if (datediff(date1,today)<0 || datediff(date1,today)> 41 || datediff(date2,today)< 0 || datediff(date2,today)> 41)
      {
        alert("只能查询最近40天范围的数据!请重新选择查询日期");
        return false;
      }
      //把选择的日期输出
      var xx = document.getElementsByName("day");
      var s="";
      for (var i=0;i<xx.length ;i++ )
      {
        if(xx[i].tagName == 'TD')
          s= s + xx[i].innerText;
          //alert(xx[i].innerText);
        else
        {
          if(xx[i].tagName == 'INPUT')
            s += xx[i].value;
        }
        if( i % 2 == 1)
          s+=";";
      }
      yy.innerHTML = s;
    }
    //实现把日期类型数据转化为标准的字符串格式
    function dateToString(d)
    {
      var y= d.getFullYear();
      var m= d.getMonth() + 1;
      var d=d.getDate();
      //把日期2017-1-6 格式化为标准的 2017-01-06
      //判断数字的长度是否是1,如果是1那么前面加上字符0
      if(m.toString().length == 1) m= "0" + m;
      if(d.toString().length == 1) d= "0" + d;
      return y+"-"+m+"-"+d;
    }
    //在页面加载的时候,初始化开始(40天前的日期)、结束日期(当天),实现默认查询最近40天的数据
    function onload()
    {
      //获取今天的日期,但是这个数据的格式不标准
      //也就是把 Fri Jan 06 2017 10:43:07 GMT+0800 转化成 2017-01-06 这种格式
      var d = new Date();
      var endDate = dateToString(d);
      //返回日期的原始值,也就是自xxx年xx月xx日 到今天的日期相差的毫秒数
      d = d.valueOf();
      d = d - 40*24*60*60*1000;
      d = new Date(d);
      var startDate = dateToString(d);
      //把日期值输出到chrome的日志中,方便调试
      console.log(d);
      console.log(startDate);
      console.log(endDate);
      var date1 = document.getElementById("date1");
      var date2 = document.getElementById("date2");
      date1.value = startDate;
      date2.value = endDate;
    }
  </script>
</head>
<body onload="onload()">
  <table>
    <tr>
      <td name="day">开始日期: <input type="date" name="day" id="date1" /></td>
    </tr>
    <tr>
      <td name="day">结束日期:<input type="date" name="day" id="date2"/></td>
      <td><input type="button" value="查 询" onclick="query()" /></td>
    </tr>
  </table>
  <hr>
  <p><span id="sp"></span><p>
</body>
</html>

运行效果:

JavaScript+HTML5实现的日期比较功能示例

PS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用:

在线日期/天数计算器:
http://tools.3water.com/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.3water.com/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.3water.com/jisuanqi/onlinedatejsq

在线天数计算器:
http://tools.3water.com/jisuanqi/datejsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 #Javascript
You might like
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP curl使用实例
2015/07/02 PHP
为你总结一些php信息函数
2015/10/21 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
python连接池实现示例程序
2013/11/26 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
如何利用python读取micaps文件详解
2020/10/18 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
庆六一活动总结
2014/08/29 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2014年质检工作总结
2014/11/26 职场文书
悬空寺导游词
2015/02/05 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS