Search code examples
javascriptflatpickr

Minimum data range in flatpickr

I'm looking for a solution to add a minimum data range in flatpicks.js For example, if the first selected date is 1 Sep the minimum next one selectable is 6 Sep.

I was thinking first of the "disable" option, but apparently, that will not work. (Flatpicker min days for range date)

Any other solutions to achieve this?

Thank you!

Solution

  • You can achieve this using the Flatpickr onChange event.

    In the onChange event we will then add 7 days to the second Flatpickr using minDate: new Date(start_date).fp_incr(increase_number_of_days);

    Example:

    $(document).ready(function() {
  let start_date = $('#start_date');
  let end_date = $('#end_date');

  start_date.flatpickr({
    dateFormat: "d-m-Y",
    disableMobile: true,
    minDate: "today",
    onChange: function(selectedDates) {
      end_date.flatpickr({
        dateFormat: "d-m-Y",
        minDate: 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;">