0
620
ViewsDeshabilitar fechas futuras en el selector de fechas de arranque sin usar startDate y endDate
Quería tener un selector de fechas que deshabilitara no solo las fechas pasadas, sino también las fechas futuras. Todas las respuestas en Stack Overflow con respecto a preguntas similares apuntan a usar startDate y endDate . Pero, ¿qué sucede si está utilizando una versión de selector de fecha que no tiene esas opciones? Por ejemplo, bootstrap-datepicker.js .
1 answers
Answer question0
El principal obstáculo fue establecer correctamente la fecha de corte final (al menos para mí). Descubrí que el método que debería funcionar para todos los selectores de fecha es agregar o restar directamente la fecha en la declaración de fecha al inicializarla, porque esta es una operación JS y los selectores de fecha de arranque se basan en JS:
new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0); Tenga en cuenta que tengo el + 6 junto a la fecha, ya que quiero que la fecha de finalización sea una semana después de la fecha de inicio elegida y deshabilitar todo después de eso.
Por lo tanto, el código completo para deshabilitar todo antes y todo una semana después de la fecha de inicio elegida es:
var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); var checkin = $('.date-group').datepicker({ onRender: function (date) { } }).on('changeDate', function (ev) { //if (ev.date.valueOf() > checkout.date.valueOf()) { var newDate = new Date(ev.date) newDate.setDate(newDate.getDate() + 0); // automatic date offset for end date (currently 0) checkout.setValue(newDate); //} checkin.hide(); checkout.show(); $('.end-date-group')[0].focus(); }).data('datepicker'); var checkout = $('.end-date-group').datepicker({ onRender: function (date) { var cap = new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0); if (date.valueOf() < checkin.date.valueOf()) { return 'disabled'; } else if (date.valueOf() > cap.valueOf()) { return 'disabled'; } } }).on('changeDate', function (ev) { checkout.hide(); }).data('datepicker');El selector de fechas resultante:
También puede hacer lo mismo para el mes y el año si surge la necesidad.
Como referencia, el selector de fecha específico que utilicé es bootstrap-datepicker.js.
Espero que esto haya ayudado. ¡Salud!