jquery-ui - only - jquery ui datepicker

Restringir fecha en jquery datepicker basado en otro datepicker o textbox

Question

Tengo dos cuadros de texto con un selector de fechas conectado a ellos. 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.

Heres lo que tengo hasta ahora:

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

Answer 1

Actualizar:

El enfoque anterior establece el minDate solo en el tiempo de creación. Usé el evento onSelect para cambiar la opción minDate del segundo datepicker como este:

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

Answer 2

Desde un punto de vista de UI puro, no deberías. 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: proporcione a cada persona que hace la cita un evento de "change" que cambie las opciones en el otro proveedor de fecha de manera apropiada.

Answer 3

Por ejemplo, en este código de ejemplo, startDatePicker se selecciona como 2010-12-12, evento de cambio 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 4

Use 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 5

Utilice el método " getDate " de la primera IU de datepicker y páselo a la opción minDate del segundo datepicker:

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

Answer 6

la solución de Tin Man funcionó para mí después de agregar $ ("# 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

Answer 7

prueba a 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());