之前在工作上遇到一个问题：使用一些时间插件，如果有俩个时间，要判断结束时间和开始时间的大小？后来就查找了一些资料，这边整理出俩个比较简便的方法。
在这我拿 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>
原文地址：https://www.cnblogs.com/tg666/p/9258705.html
时间： 2024-08-03 15:54:28