jQuery UI Wybieranie daty początkowej i końcowej w zakresie zależnym od daty rozpoczęcia

Question

Buduję selektor dat w jQuery ui. Próbuję ustawić zakres, więc gdy wybierze pierwszą datę, pojawi się druga data i wyświetli okno 30-dniowe. Próbowałem tego, ale to nie działa (to pozwala użytkownikowi wybrać 30 dni od dzisiaj, a nie 30, z datą rozpoczęcia):

var pickDate; 
$("#datepickerEnd").hide(); 
$("#datepickerStart").datepicker(); 
$("#datepickerStart").change(function(){ 
    var pickDate = $("#datepickerStart").val(); 
    $("#datepickerEnd").datepicker({ minDate: pickDate, maxDate: +30 }); 
    $("#datepickerEnd").show(); 
}) 

Kolejną kwestią wpadłem na to, kiedy zmienić datepickerStart będzie to tylko zestaw zakres początkowy raz, ale nie za każdym razem, gdy go zmieniam. Muszę odświeżyć stronę, aby zablokować nową datę rozpoczęcia.

Answer 1

Sprawdź to jsfiddl e tutaj. To działający przykład twojego problemu.

HTML

<input type="text" id="dt1"> 
<input type="text" id="dt2"> 

JS

$(document).ready(function() { 
    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function() { 
      var dt2 = $('#dt2'); 
      var startDate = $(this).datepicker('getDate'); 
      //add 30 days to selected date 
      startDate.setDate(startDate.getDate() + 30); 
      var minDate = $(this).datepicker('getDate'); 
      //minDate of dt2 datepicker = dt1 selected day 
      dt2.datepicker('setDate', minDate); 
      //sets dt2 maxDate to the last day of 30 days window 
      dt2.datepicker('option', 'maxDate', startDate); 
      //first day which can be selected in dt2 is selected date in dt1 
      dt2.datepicker('option', 'minDate', minDate); 
      //same for dt1 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 
}); 

Jak już wspomniano soderslatt należy wybrać opcję onSelec t ustawienie daty. Inne metody użyłem to:

• getDate
• setDate
• minDate
• maxDate

Myślę, że jesteśmy bardzo samodzielnego wyjaśniania i dokumentacja pozwala zrozumieć, w jaki sposób praca. Jeśli chcesz ustawić datę drugiego datepicker do dt1 data + 1 dzień tak samo jak w tym wierszu:

startDate.setDate(startDate.getDate() + 30); 

Ale oczywiście dodać 1 dnia, a nie 30.

Answer 2

Spróbuj użyć zwrotnego ui onSelect zamiast .change(), http://api.jqueryui.com/datepicker/#option-onSelect

na pliku init:

var $datepickerStart = $("#datepickerStart"); 
$datepickerStart.datepicker({ 
    onSelect: function(selectedDate) { 
     $datepickerStart.datepicker("option", "minDate", selectedDate); 
    } 
});