javascript时间比较

来源：互联网发布：信用卡和淘宝有合作编辑：程序博客网时间：2024/06/07 01:10

一、需求

表单中的开始时间、结束时间（这里的时间精确到分）的需满足：

1.开始时间、结束时间不为空

2.开始时间大于当前系统时间，结束时间大于开始时间

3.开始时间，结束时间间隔不能超过1天

二、js插件：My97DatePicker

这里主要用它来显示时间和选择时间。该插件可以用来对时间进行比较，但这里就使用javascript进行时间比较

三、代码

结构如下：js下放了插件包My97DatePicker，和时间验证代码dateTest.js。web目录下放了展示页面dateTest.html

展示页面dateTest.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>    <script type="text/javascript" src="js/dateTest.js"></script></head><body>    <form id="dateTest" onsubmit="return submitFunc();">        开始时间：<input id="startTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',realDateFmt:'yyyy-MM-dd HH:mm'})"/>        结束时间：<input id="endTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',realDateFmt:'yyyy-MM-dd HH:mm'})"/>        <br/>        <input id="submit" type="submit" value="提交"/>    </form></body></html>

时间验证代码dateTest.js

function submitFunc() {    flag = true;    // 填的时间不能为空    var startTime = document.getElementById("startTime");    if(startTime.value == null || startTime.value == "") {        alert("开始时间不能为空！");        flag = false;    }    var endTime = document.getElementById("endTime");    if(endTime.value == null || endTime.value == "") {        alert("结束时间不能为空！");        flag = false;    }    var now = new Date();    var t1 = new Date(Date.parse(startTime.value));    var t2 = new Date(Date.parse(endTime.value));    // 对时间进行验证：1.开始时间大于当前系统时间，结束时间大于开始时间    // 2.开始时间，结束时间间隔不能超过1天    if(flag) {        if(t1 > now && t2 > t1) {            // 开始时间，结束时间间隔不能超过1天            if(getDifDays(t1, t2) <= 1) {                // 填写的时间符合要求                alert("符合要求，可以提交");            } else {                alert("开始时间、结束时间，\n时间间隔不能超过1天");                flag = false;            }        } else {            alert("开始时间须大于当前时间，\n且结束时间须大于开始时间！");            flag = false;        }    }    return flag;}// 获取相差的天数function getDifDays(date1, date2) {    // 获取传入时间距离1970年的毫秒数    var t1 = date1.getTime();    var t2 = date2.getTime();    var difDays = (t2 - t1)/(1000*60*60*24);    return difDays;}

更新：以上代码（Date的parse函数）在ie下无法获取到t1,t2，导致时间判断出问题。使用正则表达式，

将

var t1 = new Date(Date.parse(startTime.value));var t2 = new Date(Date.parse(endTime.value));

改为

var t1 = new Date(estimateStartTime.value.replace(/-/g,"/"));var t2 = new Date(estimateEndTime.value.replace(/-/g,"/"));

四、补充

如果要使用My97DatePicker对用户键入的时间进行限制的话，无法将需求中的3条同时在页面上实现（经过自己多次尝试，发现可以将第2、3条结合起来），第1条就自己写 js判断吧。

第2条（开始时间大于当前系统时间，结束时间大于开始时间）单独实现如下：

（参考官方文档中动态限制的示例4-2-1 只能选择今天以前的日期(包括今天)）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script></head><body>    <form id="dateTest">        开始时间：<input id="startTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d %H:{%m+1}:%s'})"/>        结束时间：<input id="endTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'startTime\',{m:1});}'})"/>        <br/>        <input id="submit" type="submit" value="提交"/>    </form></body></html>

第3条（开始时间，结束时间间隔不能超过1天）单独实现如下：

（参考官方文档中脚本自定义限制的示例4-3-2 前面的日期+3天不能大于后面的日期）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script></head><body>    <form id="dateTest">        开始时间：<input id="startTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'endTime\',{d:-1});}'})"/>        结束时间：<input id="endTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',maxDate:'#F{$dp.$D(\'startTime\',{d:1});}'})"/>        <br/>        <input id="submit" type="submit" value="提交"/>    </form></body></html>

将第2、3条的实现结合起来如下（参考官方文档中脚本自定义限制的示例4-3-1 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01）：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script></head><body>    <form id="dateTest">        开始时间：<input id="startTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'endTime\',{d:-1})||\'%y-%M-%d %H:{%m+1}:%s\'}'})"/>        结束时间：<input id="endTime" type="text" class="Wdate" readonly="readonly"                    onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'startTime\',{m:1})||\'%y-%M-%d %H:{%m+1}:%s\'}',maxDate:'#F{$dp.$D(\'startTime\',{d:1});}'})"/>        <br/>        <input id="submit" type="submit" value="提交"/>    </form></body></html>

阅读全文

0 0