之前在工作上遇到一个问题：使用一些时间插件，如果有俩个时间，要判断结束时间和开始时间的大小？后来就查找了一些资料，这边整理出俩个比较简便的方法。

在这我拿 laydate.js 这个插件来举例：

　　首先是 html 代码，我简单的写了俩个时间框：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         * {

             list-style: none

         }

     </style>

 </head>

 <body>

     <ul>

         <li>

             <span>开始时间：</span>

             <input type="text" id="startTime">

         </li>

         <li>

             <span>结束时间：</span>

             <input type="text" id="endTime">

         </li>

         <li>

             <button id="btn1">确定</button>

             <button id="btn2">点击</button>

         </li>

     </ul>

 </body>

　　接着引入 laydate.js，为俩个输入框绑定时间插件，接着我们看第一种比较的方法：

 <script src="./laydate/laydate.js"></script>

 <script>

         laydate.render({

             elem: "#startTime"

         });

         laydate.render({

             elem: "#endTime"

         });

         var btn1 = document.getElementById("btn1");

         btn1.onclick = function() {

                 var startTime = document.getElementById("startTime").value;

                 var endTime = document.getElementById("endTime").value;

                 if (startTime > endTime) {

                     alert("开始日期不能大于结束日期");

                 }

             }

 </script>

　　这种比较方法是做了字符串的比较（因为此插件取到的时间格式是标准的时间格式，所以不用做其他操作）。

　　第二种比较方式相对于第一种，比较容易理解一点：　　

 <script src="./laydate/laydate.js"></script>

 <script>

         laydate.render({

             elem: "#startTime"

         });

         laydate.render({

             elem: "#endTime"

         });

         var btn2 = document.getElementById("btn2");

         btn2.onclick = function() {

             var startTime = document.getElementById("startTime").value;

             var endTime = document.getElementById("endTime").value;

             if (startTime.length > 0 && endTime.length > 0) {

                 var startTmp = startTime.split("-");

                 var endTmp = endTime.split("-");

                 var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);

                 var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);

                 if (sd.getTime() > ed.getTime()) {

                     alert("开始日期不能大于结束日期");

                 }

             }

         }

 </script>

　　

js关于时间（date）的比较的更多相关文章

  1. js常用数据类型（Number,String,undefined,boolean） 引用类型（ function,object,null ）,其他数据类型（ 数组Array，时间Date，正则RegExp ），数组与对象的使用

    js常用数据类型 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 typeof()函数查看变量类型 数字类型  Number var a1 = 10; var a2 = 3.66; conso ...

  2. js实现new Date()，时间对象和时间戳操作

    1.js中实现时间date对象 var myDate = new Date();//获取系统当前时间,结果:Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 2.获 ...

  3. js动态获取当前系统时间+js字符串转换为date日期对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 熟用js中的Date

    js中的Date类型是使用UTC(国际协调时间)自1970年1月1日午夜(零时)开始,经过的毫秒数来保存日期. 1. 创建日期对象  ---> 获得当前日期和时间  var now = new ...

  5. js的时间操作方法

    1.js获取系统时间格式为YYYY-MM-DD HH:MM:SS 1 function curDateTime(){ 2 var d = new Date(); 3 var year = d.getY ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. 关于JS的时间控制实现动态效果及实例操作

    关于JS的时间控制 <script>        BOM   //Bowers Object Model   浏览器对象模型    setTimeout()//    延迟执行一次   ...

  8. JS对时间的操作

    JS时间操作大全 1.获取每个月的开始和结束. 2.获取每个季度的开始和结束. 3.获取当前季度. 4.把日期转换为字符串(支持各种格式) ... 5.未完待续,不断添加 String.prototy ...

  9. js获取时间相关函数

    js获取时间函数 var myDate = new Date; var year = myDate.getFullYear();//获取当前年 var yue = myDate.getMonth()+ ...

  10. JavaScript -- 时光流逝（五）：js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

随机推荐

  1. 1066 图像过滤 (15分)C语言

    图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...

  2. gulp的简介以及使用方法

    环境介绍: pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境. pre环境:灰度环境,外部用户可以访问,但是服务器配置相对低,其它和生产一样. test环境:测试环境,外部用户 ...

  3. 阿里云ECS单节点Kubernetes部署

    参考资料: kubernetes官网英文版 kubernetes官网中文版 环境.工具 阿里云学生机ECS.Ubuntu.docker.kubectl1.15.4.kubelet1.15.4.kube ...

  4. k8s-手动安装

    预先准备信息 以下列节点数与规格来进行部署 Kubernetes 集群,操作系统CentOS 7.x IP Address Role CPU Memory 192.168.2.10 node10 4 ...

  5. 配置本地目录作为yum端

    ---恢复内容开始--- 最近在配置gnome-session中发现需要太多依赖的包,又由于实验室使用的是局域网,没有办法连接网络,所以想着配置本地yum安装.在网上找了一些资料,经过整理,把自己这次 ...

  6. 如何验证docker-compose安装成功

    安装过程及如何验证docker-compose安装成功 步骤1: 通过运行 curl 从GitHub上进行安装下载 sudo curl -L "https://github.com/dock ...

  7. spring boot集成spring-boot-starter-mail邮件功能

    前情提要 以目前IT系统功能来看,邮件功能是非常重要的一个功能.例如:找回密码.邮箱验证,邮件动态码.忘记密码,邮件营销等,都需要用到邮件功能.结合当下最流行的spring boot微服务,推出了sp ...

  8. Linux学习_菜鸟教程_3

    我是在UBANTO上运行Linux的,开机启动时按下shift或者Esc都不能进入到grub,没有百度到可靠的教程. 暂时先这样吧.免得我把系统搞坏了,先学点实用的知识~~ Next Chapter

  9. YOLOv3 K-means获取anchors大小

    YOLOv1和YOLOv2简单看了一下,详细看了看YOLOv3,刚看的时候是蒙圈的,经过一番研究,分步记录一下几个关键的点: v2和v3中加入了anchors和Faster rcnn有一定区别,这个a ...

  10. 机器学习——提升方法AdaBoost算法，推导过程

    0提升的基本方法 对于分类的问题,给定一个训练样本集,求比较粗糙的分类规则(弱分类器)要比求精确的分类的分类规则(强分类器)容易的多.提升的方法就是从弱分类器算法出发,反复学习,得到一系列弱分类器(又 ...