JavaScript - 验证日期输入，使其只是当前或未来

Question

我正在尝试验证一个日期输入框，以便它只接受当前或未来的日期。到目前为止，我一直在努力寻找最终能做到这一点的答案。

这是输入框的 HTML，不包括 <form> 标签：

<p>
   <label>Date:</label>
   <br>
   <input type="number" name="date" placeholder="DD/MM/YYYY" onchange="checkDate()">
</p>
<div id="datewarn"></div> 

这是我正在使用的 JavaScript 代码，它验证输入是否为 DD/MM/YYYY 格式，并且输入的数字是有效的日历数字，但这仍然接受过去的日期。

function checkDate() {
    var valid = true;
    var redate = /(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](19|20)\d\d/;

    if (!redate.test(document.bookingsform.date.value)) {
        document.bookingsform.date.style.border = "1px solid red";
        document.getElementById("datewarn").innerHTML = "Enter a date in the format DD/MM/YYYY.";
        document.bookingsform.date.title = "Please enter a date in the format DD/MM/YYYY.";
        document.getElementById("datewarn").style.display = "block";
        valid = false;
    } else {
        document.bookingsform.date.style.border = "1px inset #EBE9ED";
        document.bookingsform.date.style.borderRadius = "2px";
        document.getElementById("datewarn").style.display = "none";
    }
}

我所做的研究建议使用 date.js 库？这是一个内置库还是我必须得到的东西？

这只能是 JavaScript，不能是 jQuery。

编辑：抱歉，忘记添加 RegEx 变量。

Answer 1

这是一个判断您输入的日期是否为未来日期的功能。

JS函数及使用示例：

function isFutureDate(idate){
    var today = new Date().getTime(),
        idate = idate.split("/");

    idate = new Date(idate[2], idate[1] - 1, idate[0]).getTime();
    return (today - idate) < 0;
}

// Demo example
console.log(isFutureDate("02/03/3014")); // true
console.log(isFutureDate("01/01/2014")); // false

以下是适合您的实现：

function checkDate(){
    var idate = document.getElementById("date"),
        resultDiv = document.getElementById("datewarn"),
        dateReg = /(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/]201[4-9]|20[2-9][0-9]/;

    if(!dateReg.test(idate.value)){
        resultDiv.innerHTML = "Invalid date!";
        resultDiv.style.color = "red";
        return;            
    } 

    if(isFutureDate(idate.value)){
        resultDiv.innerHTML = "Entered date is a future date";
        resultDiv.style.color = "red";
    } else {
        resultDiv.innerHTML = "It's a valid date";
        resultDiv.style.color = "green";
    }
}

用这个 HTML 测试它：

<p>
    <label>Date:</label>
    <br />
    <input type="text" name="date" id="date" placeholder="DD/MM/YYYY" onkeyup="checkDate()" />
</p>
<div id="datewarn"></div> 

Working Demo:http://jsfiddle.net/ashishanexpert/LaL9W/5/

Answer 2

处理 HTML 表单中的日期

从纯文本输入中获取工作日期并不是一个简单的问题，因为有多种不同的符号，而且自相矛盾的是，它们之间的相似之处。

例如，您可以判断这是 DD/MM/YYYY：

dateString = "24/03/1983";

但是这个呢？是 DD/MM/YYYY 还是 MM/DD/YYYY：

dateString = "11/10/1998";

让我告诉你：无法猜测。而且您可以放心，即使您在字段上方打印通知，无论是粗体红色闪烁的 28px Comic Sans MS，用户都会以他习惯的格式输入日期。你甚至不能责怪他，因为你也会这样做。只是operant conditioning behavior。

这就是为什么在整个网络中，大多数日期输入都是通过 3 个下拉列表进行的：日、月、年。

判断输入是否在过去

一旦你这样做了，并假设你的价值观是：

var day = document.bookingsform.date.day.value
var month = document.bookingsform.date.month.value
var year = document.bookingsform.date.year.value

您现在可以执行测试了：

inputTime = new Date(year + "/" + month + "/" + day).getTime();

// then you can do this:

currentDate = new Date;
currentDate.setHours(0);
currentDate.setMinutes(0);
currentDate.setSeconds(0);

currentTime = currentDate.getTime();

notInPast = (inputTime - currentTime < 1000);

// or this:

currentTime = Math.round((new Date).getTime() / 86400000) * 86400000;

notInPast = (inputTime >= currentTime);

setHours() 等部分是必要的，因为当您在给定 DD/MM/YYYY 的情况下启动一个新的Date 对象时，JavaScript 将假定此Date 的时间是 00:00。而当前Date（通过new Date获得）的时间是当前时间。

因此，如果您不执行此类更正，您的表格将始终告诉您今天的 DD/MM/YYYY 已成为过去。你不想要的。