Javascript Confirm the date entry so that it is either current or future.

Question

I am trying to check the date input field so that it only accepts current or future dates. So far, I have been trying to find answers that finally do this.

Here is the HTML for the input field, with the exception of 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 the JavaScript code I use that checks if the input is in DD / MM / YYYY format and that the numbers entered are valid calendar numbers, but it 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"; } } 

Does the research I did involve using the date.js library? Is this a built-in library or is there something I need to get?

It can only be JavaScript, not jQuery.

EDIT: Sorry, forgot to add the RegEx variable.

Answer 1

This is a function to indicate if the date you enter is a future date or not.

JS Example usage and usage:

 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 

Here is the implementation:

 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 a valid date"; resultDiv.style.color = "green"; } } else { resultDiv.innerHTML = "Invalid date!"; resultDiv.style.color = "red"; } } 

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.net/ashishanexpert/LaL9W/5/

Answer 2

Working with dates from HTML forms

Working dates from text inputs is not an easy task due to the wide range of different notations and, paradoxically, the similarities between them.

For example, you can indicate if it is DD / MM / YYYY:

 dateString = "24/03/1983"; 

But what about this? This is DD / MM / YYYY or MM / DD / YYYY:

 dateString = "11/10/1998"; 

Let me tell you: it is impossible to guess . And you can be sure that even if you print a notification just above your field, whether it is highlighted in bold red flashing 28px Comic Sans MS, the user enters the date in the format in which it is used. And you cannot even blame him because you will do the same. This is just operant conditioning behavior .

That is why, throughout the network, most date entries are made through 3 drop-down lists: day, month, year.

We inform you whether the entry was in the past or not

As soon as you do this and consider your values:

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

Now you can run 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); 

Part with setHours() , etc. necessary because when you start a new Date object specified by DD / MM / YYYY, JavaScript will assume that the time for this Date is 00:00. While the time for the current Date (obtained using new Date ) is the current time.

So, if you do not perform such a correction, you will always indicate that DD / MM / YYYY is in the past today. Which you do not want.