jQuery UI DatePicker-出發日期和返回日期

Question

基本上我想做的是創建兩個DatePicker字段。 第一個是出發日期，第二個是返回日期。 因此，例如，如果某人正在尋找一個要住5晚的假期，那么當他們加載頁面時，日期將如下所示：

2010年1月12日| 日歷圖標07/12/2010 | 日歷圖標

對於出發日期，您可以選擇任何日期（今天或將來的任何日期）。 而且，當您單擊返回日期時，您只能選擇離出發日期晚五晚的日期。

通過閱讀其他有關Stack Overflow的其他文章，我幾乎可以達到這種功能。 這是我正在使用的代碼：

$().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
    }
}

此代碼執行以下操作：

如果我在出發日期字段中選擇01/12/2010。 它會自動將返回日期填充為01/12/2010。

在出發日期字段中，我可以選擇任何日期（今天和以后的日期），現在在返回日期中，我不能選擇2010年12月12日之前的日期。

但是我想發生的是，當我選擇出發日期為01/12/2010時，它將自動添加5個晚上，並將返回日期定為2010年12月12日，不允許選擇之前的任何日期。

有沒有簡單的方法可以修改上面的代碼以這種方式工作？

非常感謝，

昆汀·霍布森

Answer 1

這是我發現的解決方案：

    $(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
        }
    }