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

在这我拿 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>

  

最新文章

  1. Mongo集合操作Aggregate
  2. Deep learning:四十一(Dropout简单理解)
  3. sql拼音简写函数
  4. Java 读取大文件方法
  5. UITextView -- 基础备忘
  6. calc()函数的使用
  7. ORACLE RAC中的oc4j和gsd资源以及RAC相关的进程
  8. Java网络编程:利用Java mail包发送电子邮件
  9. 企业架构研究总结(33)——TOGAF架构内容框架之架构制品(上)
  10. centos7安装mariadb后无法启动的问题
  11. 神器Vim之命令介绍
  12. CSRF的本质及防御
  13. zookeeper安装教程
  14. SQL-10 获取所有非manager的员工emp_no
  15. 谈谈Linux下的数据流重定向和管道命令
  16. 代码参数里的 payload 是什么意思???
  17. 2018-北航-面向对象第三次OO作业分析与小结
  18. (三)微信小程序之发送服务通知(模板消息)
  19. login oracle as sysdba
  20. elasticsearch安装及与springboot2.x整合

热门文章

  1. SQLServer系统函数之字符串函数
  2. PPP协议 PAP认证
  3. java中一些常考知识
  4. (二)Angular+spring-security-cas前后端分离(基于ticket代码实现
  5. Freemarker 的基础使用 (二)
  6. Scala实践9
  7. python对象的初始化
  8. nginx服务无法停止(Windows)
  9. Splash简单应用
  10. 异数OS TCP协议栈测试(三)--长连接篇