Flatpickr issues

user_14778523 0
Viewed 52

Hi I'm having trouble getting flatpickr, would like to allow user to select 2 dates which are 7 days apart from one another.

Any dates that are not in the range of 7 days from the first selected date should be disabled. Allowing user to only select the second date from the enabled range.

for example once someone selects 20 Sept, user can only select the second date between 20 Sept - 26th Sept and disable the rest. anyone know how I can achieve this?

flatpickr jquery javascript
1 Answers

You can achieve this using the Flatpickr onChange event.

In the onChange event we will then add 7 days to the second Flatpickr using maxDate: 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),
        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;">

user_38778380
Related