At times, when validating forms we have to validate two date fields, From Date (Start Date) and To Date (End Date) when date pickers are associated with respective fields. Using normal Javascript it is big task to write a validating function.
Normally the logic we use to validate From Date and End Date is like.
1. Maximum From Date (Start Date) will be the To Date (End Date)
2. Minimum To Date (End Date) will be the From Date (Start Date).
So if a user selects From Date (Start Date) first then To Date (End Date) date picker will show the day options onwards From Date (Start Date).
If user select To Date (End Date) first then From Date (Start Date) date picker will show the day options upto To Date (End Date).
Using jQuery we can do it very simple way if we use jQuery datepicker like
$("#work_from,#work_to").datepicker({ yearRange: '1909:2100' , changeMonth: true, changeYear: true, dateFormat: 'mm/dd/yy', showAnim: 'fadeIn', duration: 1, beforeShow: function customRange(input) { if (input.id == 'work_from') { return { maxDate: jQuery('#work_to').datepicker("getDate") }; } else if (input.id == 'work_to') { return { minDate: jQuery('#work_from').datepicker("getDate") }; } } });
In the above code the datepicker is shown only after calculating max date for From Date (Start Date) based upon To Date (End Date) and min date for To Date (End Date) based upon From Date (Start Date).