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