JavaScript - 验证日期输入，这只是当前或未来 [英] JavaScript - Validate date input so it's only either current or the future

问题描述

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

I'm trying to validate a date input box so that it only accepts the current or future dates. So far I've been struggling to find answers which definitively does this.

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

Here is the HTML for the input box, excluding the <form> tags:

<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，输入的号码是有效的日历号码，但仍然接受过去的日期。

Here is JavaScript code that I'm using which validates whether the input is in the format DD/MM/YYYY and that the numbers entered in are valid calender numbers, but this still accepts past dates.

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";
    }
}

我所做的研究表明使用日期。 js库？这是一个内置的图书馆还是这个我必须得到的东西？

The research that I have done suggests using the date.js library? Is this an inbuilt library or this something I have to get?

这只能是JavaScript，没有jQuery。

This can only be JavaScript, no jQuery.

编辑：对不起，忘了添加RegEx变量。

Sorry, forgot to add the RegEx variable.

推荐答案

这是一个功能，如果你是输入是未来的日期。

This is a function to tell, if the date you are entering is future date or not.

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 ? true : false;
}

// Demo example
console.log(isFutureDate("02/03/2014")); // 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)){
        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";
        }
    } else {
        resultDiv.innerHTML = "Invalid date!";
        resultDiv.style.color = "red";
    }
}

使用此HTML进行测试： strong>

test it with this HTML:

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

工作演示 ： http：// jsfiddle .net / ashishanexpert / LaL9W / 5 /

这篇关于JavaScript - 验证日期输入，这只是当前或未来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！