Date Range Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of date range validation in JavaScript, here we used date object creation for gets specified string date to date format then we checking input date whether in between we specified date range using if condition.
When we passing date string to date object constructor we gets date as a full text string in common format so it will allow us to check same type date objects using if condition.
Step By Step Guide On Date Range Validation In JavaScript :-
Here we defined h1 element for display heading and input tag for gets date input from user, submit button defined with id ‘btn’ for submit response, div element with id ‘res’ for append results on webpage.
In script we specifying two date strings and stored on variables ‘d1,d2’ then we changing d1,d2,user date input to common format using if condition we checking whether user date in between we specified range and respective result message displayed to user.
<!DOCTYPE html>
<html>
<head>
<title>DATE RANGE VALIDATION</title>
</head>
<body>
<h1>DATE RANGE IS 01/09/1998 to 24/09/1998</h1>
<input type="date" id="d">
<button id="btn">Submit</button>
<div id="res"></div>
<script>
var d1="1998-09-01";
var d2="1998-09-24";
document.getElementById('btn').addEventListener('click',function(){
var d3=document.getElementById('d').value;
var da1=new Date(d1);
var da2=new Date(d2);
var da3=new Date(d3);
if(d3>d1 && d3<d2){
document.getElementById('res').innerHTML="<br>DATE IS IN BETWEEN VALID RANGE";
}
else{
document.getElementById('res').innerHTML="<br>DATE IS NOT IN BETWEEN VALID RANGE";
}
})
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h1 tag for showing heading, date input type for gets input from user, submit button with id ‘btn’ for checks user response and div element with id ‘res’ for appends result on webpage by innerHTML.
- In script variable ‘d1’ defined for store start date ‘1998-09-01’ string, variable ‘d2’ defined for store end date ‘1998-09-24’ string.
- Using addEventListener event we get response when when user clicks on Submit button there we collecting user input and stored on variable ‘d3’ then we changing ‘d1,d2,d3’ to common date string format by passing them on creation of date object.
- In if condition we checking whether d3 greater than d1 and less than d2 then user input date is in between correct range.
- Finally we appending respective message on webpage div element ‘res’ by innerHTML.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate date range using javascript.
When we executes program on browser we can see heading and input tag, submit button.
User needs to give any date as input but mentioned between date range and clicks on Submit button then respective result message will display.
If user date between given range result is ‘DATE IS IN BETWEEN VALID RANGE’ otherwise result is ‘DATE IS NOT IN BETWEEN VALID RANGE’.
I hope this tutorial on date range validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
