Start Date And End Date Validation In JavaScript Example
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of start date and end date validation in JavaScript example, here we need to use jquery support library for access date picker so we imported jquery and jquery ui external file links.
The two input fields defined for give start and end date with the help of jquery ui we can easily sets minimum and maximum date so user can’t give wrong date like end date became previous date of start date, because they gone to disabled state.
Step By Step Guide On Start Date And End Date Validation In JavaScript Example :-
Here we defined two input fields for give start and end date. By using input tag id attribute we can pick and access any date.
In script by using jquery ui we sets date picker on the input field and sets minimum date as start date of user given date to the end date so user can’t access previous date of start date as end date.
Then it’s revise we done for end date so users can pick any date as we expected way.
<!DOCTYPE html>
<html>
<head>
<title>Date Picker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
div{
padding: 15px;
}
</style>
</head>
<body>
<div>Start Date: <input type="text" id="staDate"></div>
<div>End Date: <input type="text" id="enDate"></div>
<script>
$('#staDate').datepicker({
onSelect: function(dateText,inst){
$('#enDate').datepicker('option','minDate',new Date(dateText));
}
});
$('#enDate').datepicker({
onSelect: function(dateText,inst){
$('#staDate').datepicker('option','maxDate',new Date(dateText));
}
});
</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 contains 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 two input fields for user can pick start and end date and input field defined with id attributes ‘staDate, enDate’.
- In script we appended date picker on the input fields then we user selects start date we sets that date value as minimum value for end date.
- So user never forgets to select any previous date of start date because previous date sets to disabled state.
- Then same as we appends date picker to end date and which date user picks that’s set as maximum value for start date.
- 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 start and end date using javascript.
When we executes our program on browser we can see two input field for user can select start and end date when user selects start date then we can see previous date of start date turned to disable state and user can’t access them so user have only one choice to pick end date as same or next dates of start date.
I hope this tutorial on start date and end date validation in JavaScript example helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
