'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!

javascript flatpickr

Solution 1:^[1]

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;">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Crezzur

'Minimum data range in flatpickr

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]