Interfaccia utente jQuery Selezione di una data di inizio e di fine nell'intervallo in base alla data di inizio

Question

Sto costruendo una selezione di date in jQuery ui. Quello che sto cercando di fare è impostare un intervallo, così quando prendono la prima data appare la seconda data e dà una finestra di 30 giorni. Ho provato questo ma non funziona (che consente all'utente di scegliere 30 giorni a partire da oggi, non 30 dalla data di inizio):

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

Un altro problema che ho incontrato è quando cambio datepickerStart che sarà impostato solo l'intervallo iniziale una volta, ma non tutte le volte che lo cambio. Devo aggiornare la pagina per bloccare una nuova data di inizio.

Answer 1

Scegli questa jsfiddl e qui. È un esempio funzionante del tuo problema.

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" 
    }); 
}); 

Come Söderslätt uso già accennato la possibilità onSelec t per impostare le date. Altri metodi che ho usato sono:

• getDate
• setDate
• minDate
• maxDate

penso che siano tutti molto di sé e spiegare la documentazione aiuta a capire il modo in cui lavoro. Se si desidera impostare la data del secondo datepicker ad oggi + 1 giorno di dt1 fare lo stesso come in questa linea:

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

Ma naturalmente aggiungere 1 giorno e non 30.

Answer 2

provare a utilizzare il callback ui onSelect invece di .Per passare(), http://api.jqueryui.com/datepicker/#option-onSelect

su init:

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