Q2. How to set End Date should not be less than Start Date using jQuery Date Picker?
A2. There are mainly 2 kind of validation conditions which are
- Start date should not greater than end date.
- End date should not less than start date.
So let’s put 2 textboxes “txtFromDate” and “txtToDate” and assign Date picker to it. With jQuery UI Date picker, there is an event “onSelect” which fires when any date is selected. So using this event, set the date range for other date pickers.
For example, when from date is selected, then using this “onSelect” event we will set the “minDate” attribute of “txtToDate” textbox to the selected date in “txtFromDate”. What it does is that, dates less than the selected from date will be disabled in “txtToDate” textbox. And same way set the “MaxDate” attribute for “txtFromDate” in onSelect event of “txtToDate” textbox. Below is the complete jQuery code.
“numberOfMonths” attribute allows to display multiple months in date picker.
Q3. How to disable future dates in Date Picker using jQuery?
A3. The datepicker has the maxdate property that you can set when you initialize it.
Similarly past dates can also be disabled by setting minDate : new Date.