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

Question

基本上我想要做的是創建兩個DatePicker字段。第一個是離職日期，第二個是返回日期。例如，如果有人正在尋找一個5晚住宿的假期，當他們裝載頁面時，日期看起來如下：

01/12/2010 |日曆圖標 07/12/2010 |日曆圖標

對於離職日期，您將能夠選擇任何日期（今天的日期或任何未來的日期）。當您點擊返回日期時，您只能選擇離開日期五晚的日期。

我幾乎從閱讀各種其他堆棧溢出文章的方式得到這個功能。下面是我使用的代碼：

$().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的返回日期。

在離職日期字段中，我可以選擇任何日期（今天的日期和更大的日期），現在在退貨日期，我無法選擇01/12/2010之前的日期。

但是我想要發生的是當我在離開的日期選擇01/12/2010時，它會自動添加5晚，並使返回日期07/12/2010，並且不允許任何天之前被選中。

是否有任何簡單的方法來修改上述代碼以這種方式工作？

非常感謝，

昆廷·霍布森

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