正文
js关于时间（date）的比较
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
之前在工作上遇到一个问题：使用一些时间插件，如果有俩个时间，要判断结束时间和开始时间的大小？后来就查找了一些资料，这边整理出俩个比较简便的方法。
在这我拿 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>
