javascript - example - Cómo establecer minDate y maxDate para bootstrap datetimepicker en el cambio

datepicker bootstrap español

Question

Quiero pedirle a los usuarios un rango de fechas usando bootstrap datetimepicker. Hay un campo para la fecha de inicio y otro para la fecha de finalización, y se inicializan el día anterior al día actual. En el cambio a la fecha de inicio, quiero establecer el minDate de la fecha de finalización en el valor de la fecha de inicio; y en el cambio a la fecha de finalización, quiero establecer la fecha máxima de la fecha de inicio en el valor de la fecha de finalización. Pero no puedo hacer que esto funcione.

Aquí está el código JS:

var start = $(''.start'');
var end = $(''.end'');
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate() - 1;
var year = d.getFullYear();
start.datetimepicker(
{
useCurrent: false,
defaultDate: month + ''-'' + day + ''-'' + year + '' '' + ''12:00AM'',
autoClose: true
})
.on(''change'', function (selected) {
end.minDate(selected.?????????); // What should replace the question marks?
});
end.datetimepicker(
{
useCurrent: false,
defaultDate: month + ''-'' + day + ''-'' + year + '' '' + ''11:59PM'',
autoClose: true
})
.on(''change'', function (selected) {
start.maxDate(selected.???????); // What should replace the question marks?
});

y el HTML:

<div class="col-sm-3">
<div class="form-group">
<h4>Start Date</h4>
<div class="input-group date">
<input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h4>End Date</h4>
<div class="input-group date">
<input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

He encontrado entradas sobre una operación similar en datepicker , pero eso se hace de forma diferente a datetimepicker así que no marques duplicados a menos que encuentres una pregunta similar para datetimepicker .

Answer 1

1. Fecha de inicio

   .on(''dp.change'', function (selected) {
   end.data("DateTimePicker").minDate(selected.date);
   });

2. Fecha final

   .on(''dp.change'', function (selected) {
   start.data("DateTimePicker").maxDate(selected.date);
   });

Actualización del Paquete : El paquete date timepicker se ha actualizado a la última versión donde podemos usar ''maxDate ()'' en lugar de ''setMaxDate ()'' y ''minDate ()'' en lugar de ''setMinDate ()'' ya que las opciones recientes consideran incluso el tiempo en horas y minutos al proporcionar la opción maxDate / minDate.

Answer 2

Según el ejemplo de Seleccionadores Vinculados en la documentación de fecha y hora de Bootstrap , esto debería funcionar.

Comienzo:

 .on(''dp.change'', function (selected) {
end.data("DateTimePicker").minDate(selected.date);
});

Fin:

 .on(''dp.change'', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});

Nota:

En versiones anteriores de Bootstrap datetimepicker (menor que v4), use .setMinDate y .setMaxDate