jQuery UI DatePicker - Дата отправления и дата возврата

Question

В основном, я пытаюсь создать два поля DatePicker. Первая - это дата отправления, вторая - дата возвращения. Например, если кто-то искал праздник, который был 5 ночей, когда они загрузили страницу, даты выглядели бы следующим образом:

01/12/2010 | Иконка Calendar 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 
     } 
    }