Estoy construyendo un selector de fecha en jQuery ui. Lo que estoy tratando de hacer es establecer un rango, de modo que cuando se elige la primera fecha de la segunda fecha aparece y da una ventana de 30 días. Lo he intentado pero no funciona (permite al usuario elegir 30 días a partir de hoy, no 30 a partir de la fecha de inicio):
var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
var pickDate = $( "#datepickerStart" ).val();
$( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
$( "#datepickerEnd" ).show();
})
Otro problema que me encontré es cuando cambio datepickerStart it'll sólo establecer el rango de inicio una vez, pero no cada vez que lo cambie. Tengo que actualizar la página para fijar una nueva fecha de inicio.
Comprueba esto [jsfiddle][1] aquí. Es un ejemplo práctico de tu 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');
var dt2Date = dt2.datepicker('getDate');
//difference in days. 86400 seconds in day, 1000 ms in second
var dateDiff = (dt2Date - minDate)/(86400 * 1000);
//dt2 not set or dt1 date is greater than dt2 date
if (dt2Date == null || dateDiff < 0) {
dt2.datepicker('setDate', minDate);
}
//dt1 date is 30 days under dt2 date
else if (dateDiff > 30){
dt2.datepicker('setDate', startDate);
}
//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);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
minDate: 0
});
});
Como ya mencionó soderslatt utilice la opción onSelect para establecer las fechas. Otros métodos que he utilizado son:
Creo que todos ellos se explican por sí mismos y la documentación te ayuda a entender cómo funcionan. Si quieres establecer la fecha del segundo datepicker a la fecha de dt1's + 1 día haz lo mismo que en esta línea:
startDate.setDate(startDate.getDate() + 30);
Pero por supuesto añade 1 día y no 30.
Pruebe a utilizar la llamada de retorno ui onSelect en lugar de .change(), http://api.jqueryui.com/datepicker/#option-onSelect
en init:
var $datepickerStart = $("#datepickerStart");
$datepickerStart.datepicker({
onSelect: function( selectedDate ) {
$datepickerStart.datepicker( "option", "minDate", selectedDate );
}
});
$("#start_date").datepicker().on('changeDate', function(selected){
startDate = new Date(selected.date.valueOf());
$('#end_date').datepicker('setStartDate', startDate);
});
$("#end_date").datepicker().on('changeDate', function(selected){
startDate = new Date(selected.date.valueOf());
$('#start_date').datepicker('setEndDate', startDate);
});