Start/End Date Ranges Based on Dropdown Option Selected
Based on the selected option, the date range will either be a date range of 30 days or any future date.
by konijn_gmail_com
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
<select id="select1">
<option selected="selected" disabled="disabled">Select an Option</option>
<option value="thirtyDays">30 Day Range</option>
<option value="futureDays">Any Future Date</option>
</select>
<input type="text" id="startDate" placeholder="Start Date" disabled="disabled" />
<input type="text" id="endDate" placeholder="End Date" disabled="disabled" />
</div>
JavaScript
$('#startDate, #endDate').datepicker({
beforeShow: setDateRange,
dateFormat: "mm/dd/yy",
firstDay: 1,
changeFirstDay: false,
onChange: function () {
$(this).valid();
}
});
var dateLogic = {
addDays: function addDays(initialDate, dayCount) {
var newDate = new Date(initialDate);
newDate.setDate(newDate.getDate() + dayCount);
return newDate;
},
openWide: {
minDate: null,
maxDate: null
},
futureDays: {
startDate: function startDateFutureDays(currentStart, currentEnd) {
return !currentEnd ? dateLogic.openWide : {
minDate: null,
maxDate: dateLogic.addDays(currentEnd, -1)
}
},
endDate: function endDateFutureDays(currentStart) {
return {
minDate: currentStart,
maxDate: null
}
}
},
thirtyDays: {
startDate: function startDateThirtyDays(currentStart, currentEnd) {
return !currentEnd ? dateLogic.openWide : {
maxDate: currentEnd,
minDate: dateLogic.addDays(currentEnd, -30)
};
},
endDate: function endDateThirtyDays(currentStart) {
return !currentStart ? dateLogic.openWide : {
minDate: currentStart,
maxDate: dateLogic.addDays(currentStart, 30)
}
}
}
};
function setDateRange(input) {
var opt = $('#select1'),
startDate = $('#startDate').datepicker('getDate'),
endDate = $('#endDate').datepicker('getDate');
return dateLogic[opt.val()][input.id](startDate, endDate);
}
$('#select1').change(function () {
$('#startDate, #endDate').val('');
$('#startDate, #endDate').removeAttr('disabled');
});