js關於時間（date）的比較
阿新 • • 發佈：2018-07-03
pan col round device lis href script 資料 wid
之前在工作上遇到一個問題：使用一些時間插件，如果有倆個時間，要判斷結束時間和開始時間的大小？後來就查找了一些資料，這邊整理出倆個比較簡便的方法。
在這我拿 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>
js關於時間（date）的比較