I'm working on creating two DatePicker fields for selecting departing and returning dates. For instance, if a user is planning a 5-night holiday, the initial dates displayed would be:
01/12/2010 | Calendar Icon 07/12/2010 | Calendar Icon
With the departing date field allowing selection of any future date, while the returning date field restricts selection to dates that are five nights after the departing date.
I've made progress in achieving this functionality by referring to various Stack Overflow articles. Below is the code snippet I am using:
$().ready(function() {
$('.dDate, .rDate').datepicker({
showOn: 'both',
buttonImage: "<?=$http?>layout_images/calendar.gif",
buttonImageOnly: true,
beforeShow: customRange,
buttonText: 'Open Calendar',
firstDay: 1,
dateFormat: 'D d M yy',
onSelect: function(date) {
date = $(this).datepicker('getDate');
$('#returningdate').val($.datepicker.formatDate('D d M yy', date));
}
});
});
function customRange(a) {
var b = new Date();
var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
if (a.id == 'returningdate') {
if ($('.dDate').datepicker('getDate') != null) {
c = $('.dDate').datepicker('getDate');
}
}
return {
minDate: c
}
}
The current code behavior is as follows:
After selecting 01/12/2010 in the departing date field, the returning date field automatically shows 01/12/2010.
Departing date allows selection of any date (including today), and the return date cannot be earlier than 01/12/2010.
However, the desired behavior is for the system to automatically add 5 nights to the selected departing date (01/12/2010) and set the returning date to 07/12/2010, restricting selection of dates prior to that.
Is there an easy way to modify the existing code to achieve this functionality?
Thanks,
Quintin Hobson