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已经过去了。你不想要的。

JavaScript - 验证日期输入，因此它只是当前或未来

2 个答案:

使用HTML表单中的日期

如果输入是否过去则告诉