Future Date Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of future date validation in JavaScript, validation on future date means that we have to check whether the date given by developer or user is present date or future date.
If the date fed is in future than today then our program must return true otherwise program have to return false.
So, let us understand how to apply future date validation in JavaScript.
Step By Step Guide On Future Date Validation In JavaScript :-
Here, as we already understand that what the concept is and what we have to do.
Now, there are many ways with help of which we are able to apply validation on future date.
Now, let us see the example given below using one way from them.
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1>
Talkers Code – JavaScript Validation
</h1>
<h2>
Future date validation in JavaScript
</h2>
<div>
<label>
Enter Date here:
</label>
<br />
<input type="text" name="date" id="date" placeholder="DD/MM/YYYY" onkeyup="valuserDateDate()" />
</div>
<div id="result"></div>
<script>
function valuserDateDate(){
var userDate = document.getElementById("date"),
result = document.getElementById("result"),
regExp = /(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/]201[4-9]|20[2-9][0-9]/;
if(!regExp.test(userDate.value)){
result.innerHTML = "Invalid date!";
result.style.color = "red";
return;
}
if(FutureDate(userDate.value)){
result.innerHTML = "Entered date is a future date";
return True;
} else {
result.innerHTML = " Entered date is not a future date ";
return False;
}
}
function FutureDate(userDate){
var today = new Date().getTime(),
userDate = userDate.split("/");
userDate = new Date(userDate [2], userDate [1] - 1, userDate [0]).getTime();
return (today - userDate) < 0;
}
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
- Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
- JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
- Here, as we see that inside body we create two division. First one is to get date from user and another is to display the output that it is valid or not. Whereas button help us to call the required JavaScript function.
- Now, let us see our JavaScript script. Here, we store the required values of html tags which we want and then create a regular expression for date. Which checks that given date is valid or not.
- Then it goes in our if statement which calls our future date function to check whether the date given is greater that todays date or not. If the date is greater that today date then it will display a message that entered date is future date otherwise it will print that entered date is not a future date.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand how to apply future date validation in JavaScript.
I hope this tutorial on future date validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
