validation - JavaScript - Validate date input so it's only either current or the future - Stack Overflow

admin管理员组

文章数量:1236709

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.

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> 

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

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

This can only be JavaScript, no jQuery.

EDIT: Sorry, forgot to add the RegEx variable.

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.

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> 

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

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

This can only be JavaScript, no jQuery.

EDIT: Sorry, forgot to add the RegEx variable.

• javascript
• validation
• date

Share Improve this question Follow asked Feb 1, 2014 at 15:20 RoyalSwishRoyalSwish 1,5731010 gold badges3333 silver badges6161 bronze badges 5

• Use input type date instead. – Minko Gechev Commented Feb 1, 2014 at 15:29
• That doesn't work on Firefox, and Chrome only does YYYY-MM-DD. W3C Validator says that this Input Type doesn't work on all browsers. I'd rather stay away from it. – RoyalSwish Commented Feb 1, 2014 at 15:37
• Yeah, input type number doesn't work in all browsers too but one day it will. If you are afraid of browser inpatibility use input type text instead. – Minko Gechev Commented Feb 1, 2014 at 15:40
• True, but the Validator doesn't give a warning for number, whereas date does. – RoyalSwish Commented Feb 1, 2014 at 15:43
• You can use novalidate attribute if you don't want warnings and validate everything with your current (or improved) regular expression. – Minko Gechev Commented Feb 1, 2014 at 15:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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

JS Function and use example:

const isFutureDate = (idate) =>{
    let 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

Here is implementation for you:

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

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> 

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

Working with dates from HTML forms

Working dates from plain text inputs is not an easy problem, because of the wide range of different notations, and paradoxically, the similarities between them.

For instance, you can tell whether this is DD/MM/YYYY:

dateString = "24/03/1983";

But how about this one? Is it DD/MM/YYYY or MM/DD/YYYY:

dateString = "11/10/1998";

Let me tell you: there is no way to guess. And you can rest assured that even if you print a notice just above your field, be it in bold red blinking 28px Comic Sans MS, the user will enter the date in the format he is used to. And you can't even blame him, because you would do the same. It's just operant conditioning behavior.

That's why, throughout the web, most date inputs are made through 3 drop-down lists: day, month, year.

Telling if the input is in the past or not

Once you do that, and assuming that your values are:

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

You are now able to perform your test:

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);

The part with setHours() etc is necessary because when you start a new Date object given DD/MM/YYYY, JavaScript will assume that the time for this Date is 00:00. Whereas the time for the current Date (obtained with new Date) is the current time.

So if you don't perform this kind of correction, you form will always tell that today's DD/MM/YYYY is in the past. Which you don't want.

本文标签： validationJavaScriptValidate date input so it39s only either current or the futureStack Overflow