js关于时间(date)的比较
2024-10-19 19:34:46
之前在工作上遇到一个问题:使用一些时间插件,如果有俩个时间,要判断结束时间和开始时间的大小?后来就查找了一些资料,这边整理出俩个比较简便的方法。
在这我拿 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>
最新文章
- Mongo集合操作Aggregate
- Deep learning:四十一(Dropout简单理解)
- sql拼音简写函数
- Java 读取大文件方法
- UITextView -- 基础备忘
- calc()函数的使用
- ORACLE RAC中的oc4j和gsd资源以及RAC相关的进程
- Java网络编程:利用Java mail包发送电子邮件
- 企业架构研究总结(33)——TOGAF架构内容框架之架构制品(上)
- centos7安装mariadb后无法启动的问题
- 神器Vim之命令介绍
- CSRF的本质及防御
- zookeeper安装教程
- SQL-10 获取所有非manager的员工emp_no
- 谈谈Linux下的数据流重定向和管道命令
- 代码参数里的 payload 是什么意思???
- 2018-北航-面向对象第三次OO作业分析与小结
- (三)微信小程序之发送服务通知(模板消息)
- login oracle as sysdba
- elasticsearch安装及与springboot2.x整合