zoukankan      html  css  js  c++  java
  • js关于时间(date)的比较

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

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

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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>Document</title>
     9     <style>
    10         * {
    11             list-style: none
    12         }
    13     </style>
    14 </head>
    15 
    16 <body>
    17     <ul>
    18         <li>
    19             <span>开始时间:</span>
    20             <input type="text" id="startTime">
    21         </li>
    22         <li>
    23             <span>结束时间:</span>
    24             <input type="text" id="endTime">
    25         </li>
    26         <li>
    27             <button id="btn1">确定</button>
    28             <button id="btn2">点击</button>
    29         </li>
    30     </ul>
    31 </body>

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

     1 <script src="./laydate/laydate.js"></script>
     2 <script>
     3         laydate.render({
     4             elem: "#startTime"
     5         });
     6         laydate.render({
     7             elem: "#endTime"
     8         });
     9 
    10         var btn1 = document.getElementById("btn1");
    11         btn1.onclick = function() {
    12                 var startTime = document.getElementById("startTime").value;
    13                 var endTime = document.getElementById("endTime").value;
    14 
    15                 if (startTime > endTime) {
    16                     alert("开始日期不能大于结束日期");
    17                 }
    18             }
    19 </script>

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

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

     1 <script src="./laydate/laydate.js"></script>
     2 <script>
     3         laydate.render({
     4             elem: "#startTime"
     5         });
     6         laydate.render({
     7             elem: "#endTime"
     8         });
     9 
    10         var btn2 = document.getElementById("btn2");
    11 
    12         btn2.onclick = function() {
    13             var startTime = document.getElementById("startTime").value;
    14             var endTime = document.getElementById("endTime").value;
    15 
    16             if (startTime.length > 0 && endTime.length > 0) {
    17                 var startTmp = startTime.split("-");
    18                 var endTmp = endTime.split("-");
    19                 var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);
    20                 var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);
    21                 if (sd.getTime() > ed.getTime()) {
    22                     alert("开始日期不能大于结束日期");
    23                 }
    24             }
    25         }
    26 </script>

      

  • 相关阅读:
    Fedora13下真正能用的源(2015-5-16亲测)
    Shellcoding教程:介绍ASM(译)
    Shellcoding教程:介绍ASM
    ubuntu解决pppoeconf和network-manager冲突时,可能问题的解决方法
    vue_router-link传参
    js_window.postMessage往不同窗口里面发送数据
    iframe_iframe引入其它页面
    css_去掉默认样式
    vue_常用组件install
    js_正则表达式
  • 原文地址:https://www.cnblogs.com/tg666/p/9258705.html
Copyright © 2011-2022 走看看