Restringir fecha en jquery datepicker basado en otro datepicker o cuadro de texto

Question

Tengo dos cuadros de texto con un datepicker enlazado. Los cuadros de texto son para la fecha de inicio y la fecha de finalización. El primer datepicker está configurado para que el usuario no pueda elegir una fecha anterior al día de hoy, pero puede elegir cualquier fecha en el futuro.

¿Cómo puedo configurar el segundo datepicker para que no pueda elegir una fecha anterior a la fecha elegida en el primer selector de fecha? Por ejemplo: si hoy es 12/11/10 y elijo 15/12/10 en el primer datepicker, el segundo selector de fecha no debería poder elegir nada antes del 12/15/10.

Esto es lo que tengo hasta ahora:

$("#txtStartDate").datepicker({ minDate: 0 }); 
$("#txtEndDate").datepicker({}); 

Answer 1

Por ejemplo, en este código de ejemplo, startDatePicker se selecciona como 2010-12-12, el cambio caso de startDatePicker establece el MinDate de endDatePicker 2010-12-13. Bloquea las celdas antes de esta fecha. Esta es una muestra de lo que @Victor mencionó. Espero que ayude ... Saludos ... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
}); 

Answer 2

Desde el punto de vista de IU pura, que no debería. Si el usuario elige el mes incorrecto en ambos buscadores de fechas e intenta seleccionar el mes correcto, la IU le impedirá un 50%. Idealmente, permitiría la selección incorrecta y mostraría un mensaje de error útil que indica que la fecha de finalización debe ser posterior a la fecha de finalización.

Si desea implementar su idea: otorgue a cada fechador un evento "change" que cambie las opciones en el otro proveedor de fecha de manera apropiada.

Answer 3

Utilice el método "getDate" de la primera interfaz de usuario selector de fechas y pasarlo a minDate opción del segundo selector de fechas:

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
}); 

Answer 4

Actualización:

El enfoque anterior establecido MinDate sólo en tiempo de creación. I utilizó el evento onSelect para cambiar la opción MinDate del segundo selector de fechas así:

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

Answer 5

utilizar este código:

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script> 

Answer 6

tratar este hombre:

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date()); 

Answer 7

solución del hombre de hojalata trabajó para mí después de la adición de $ ("# txtEndDate"). datepicker() en la parte inferior

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line