jQuery UI DatePicker - Departing Date and Returning Date

Question

Hi,

Basically what I'm trying to do is create two DatePicker fields. The first is the departing date and the second is the returning date. So for example if someone was looking for a holiday that was a 5 night stay, when they loaded the page the dates would look as follows:

01/12/2010 | Calendar Icon 07/12/2010 | Calendar Icon

For the departing date you would be able to select any date (todays date or any future date). And when you clicked the returning date, you would only be able to select dates that are five nights past the departing date.

I've almost got this functioning in the manner from reading various other Stack Overflow articles. Here is the code I'm 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
    }
}

This code does the following:

If I select 01/12/2010 in the departing date field. It automatically populates the returning date with 01/12/2010.

In the departing date field I can select any date (todays date and greater) and now in the return date I can't select days before the 01/12/2010.

But what I want to happen is when I select the 01/12/2010 in the departing date, it will add the 5 nights automatically and make the returning date 07/12/2010 and not allow any days before that to be selected.

Is there any easy way to modify the above code to work in this way?

Many thanks,

Quintin Hobson

Answer 1

This is the solution I found:

    $(document).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');
                if($(this).attr("id") != 'returningdate'){
                    var returnDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 6);
                    $('#returningdate').val($.datepicker.formatDate('D d M yy', returnDate));
                }
            }
        });
    });

    function customRange(a) {
        var returnDateMin;
        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');
            }
            returnDateMin = new Date(c.getFullYear(), c.getMonth(), c.getDate() + 6);
        }
        else
        {
            returnDateMin = c;
        }
        return {
            minDate: returnDateMin
        }
    }