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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
vue实现微信分享功能
Nov 28 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
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
十天学会php(3)
2006/10/09 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python利用platform模块获取系统信息
2020/10/09 Python
苏州园林导游词
2015/02/03 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android