Hola, tengo problemas para obtener flatpickr, me gustaría permitir que el usuario seleccione 2 fechas con 7 días de diferencia entre sí.
Cualquier fecha que no esté en el rango de 7 días a partir de la primera fecha seleccionada debe deshabilitarse. Permitiendo al usuario seleccionar solo la segunda fecha del rango habilitado.
por ejemplo, una vez que alguien selecciona el 20 de septiembre, el usuario solo puede seleccionar la segunda fecha entre el 20 de septiembre y el 26 de septiembre y deshabilitar el resto. alguien sabe como puedo lograr esto?
Puede lograr esto usando el evento Flatpickr onChange .
En el evento onChange , agregaremos 7 días al segundo Flatpickr usando maxDate: new Date(start_date).fp_incr(increase_number_of_days) ;
Ejemplo:
$(document).ready(function() { let start_date = $('#start_date'); let end_date = $('#end_date'); start_date.flatpickr({ dateFormat: "dmY", disableMobile: true, minDate: "today", onChange: function(selectedDates) { end_date.flatpickr({ dateFormat: "dmY", minDate: new Date(selectedDates), maxDate: new Date(selectedDates).fp_incr(6), // add 7 days }); } }); end_date.flatpickr({}); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script> <input id="start_date" style="width:200px;"> <input id="end_date" style="width:200px;">