• 1

• 35.2k
• 13
• 134
• 238

Reduce Code Handling Startcode handling start and End Datepickersend datepickers

• 234
• 1
• 2
• 13

I have a select with 3 options and two datepickers, a start and an end date. Based on the option selected, the date end date can either be any future date or limited to a 30 day date range. In the jsFiddle provided below, when Option 1 is selected, the date range is restricted to 30 days. If either Option 2 or Option 3 are selected, the end date can be any future date.

Here is a complete working jsFiddle with the complete code.

I haven't run into any issues with the code below, I'm just wondering if anyone has any suggestions on how I could go about reducing it as it just seems too "bulky".

$('#startDate, #endDate').datepicker({
 beforeShow: setDateRange,
 dateFormat: "mm/dd/yy",
 firstDay: 1,
 changeFirstDay: false,
 onChange: function() { $(this).valid(); },
 onSelect: function() {
 if (this.id == 'startDate') {
 var date = $('#startDate').datepicker('getDate');
 if (date) { date.setDate(date.getDate() + 1); }
 $('#endDate').datepicker('option', 'minDate', date);
 }
 }
});
function setDateRange(input) {
 var min = null, dateMin = min, dateMax = null, dayRange = 30;
 var opt = $('#select1'), start = $('#startDate'), end = $('#endDate');
 if (opt.val() == '1') {
 if (input.id == 'startDate') {
 if ($('#endDate').datepicker('getDate') != null) {
 dateMax = $('#endDate').datepicker('getDate');
 dateMin = $('#endDate').datepicker('getDate');
 dateMin.setDate(dateMin.getDate() - dayRange);
 if (dateMin < min) { dateMin = min; }
 }
 } else if (input.id == 'endDate') {
 dateMin = $('#startDate').datepicker('getDate');
 dateMax = new Date(dateMin.getFullYear(), 
 dateMin.getMonth(), dateMin.getDate() + 30);
 if ($('#startDate').datepicker('getDate') != null) {
 var rangeMax = new Date(dateMin.getFullYear(), 
 dateMin.getMonth(), dateMin.getDate() + dayRange);
 if (rangeMax < dateMax) { dateMax = rangeMax; }
 }
 }
 } else if (opt.val() != '1') {
 if (input.id == 'startDate') {
 if ($('#endDate').datepicker('getDate') != null) {
 dateMin = null;
 }
 } else if (input.id == 'endDate') {
 dateMin = $('#startDate').datepicker('getDate');
 dateMax = null;
 if ($('#startDate').datepicker('getDate') != null) { dateMax = null; }
 }
 }
 return {
 minDate: dateMin,
 maxDate: dateMax
 };
}

I posted this on StackOverflow a couple months back when I was initially trying to figure out how to get it working. The post goes into a little more detail on the option selections but I have since added on to it some. For example, the code above now includes an onSelect when the datepickers are initialized.

If anyone has any suggestions on how I could go about improving this please let me know.