Ability to set minimum length of range selection

I can’t figure out a way to enforce a minimum length for a range flatpickr.

E.g. when selecting dates for a hotel booking, I don’t want the user to be able to chose the same date for both check-in and check-out. The check-out date must be at least 1 day later than check-in.

I tried using set() to change minDate inside an onChange() callback when the user chooses the first date, but this resulted in an infinite loop (i’m using vue-bulma-datepicker).

Your Environment

• flatpickr version used: 2.4.2
• Browser name and version: Chrome 57
• OS and version: OSX 10.12.3

[johnobono]

I solved it using following code:

onChange (selectedDates, value, datepicker) {
    if (selectedDates.length === 2) {
        let diffTime = Math.abs(selectedDates[1] - selectedDates[0]);
        let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
        let addDays = Math.max(0, <YOUR_RANGE_MIN_LENGTH> - diffDays);

        if (addDays > 0) {
            selectedDates[1].setDate(selectedDates[1].getDate() + addDays);
            datepicker.setDate(selectedDates);
            setTimeout(() => {
                datepicker.jumpToDate(selectedDates[0]);
                datepicker.open();
            });
        }
    }
}

replace <YOUR_RANGE_MIN_LENGTH> with the desired range length

[xcrap]

Thanks for the quick reply. I tried switching to vue-datepicker which uses the latest version of flatpickr (v2.4.7), but I still have the same problem.

Here’s what I’m trying to do, I’m not sure if this is even the right approach:

onChange (selectedDates, value, datepicker) {
  if (selectedDates.length === 1) {
    datepicker.set('minDate', addDays(selectedDates[0], 1)) // addDays() is from date-fns
  } else {
    datepicker.set('minDate', 'today') // reset back to default
  }
}

It every time I call datepicker.set(), onChange() is called again causing the loop.

But even without the loop (if I comment out the datepicker.set('minDate', 'today') line), flatpickr doesn’t seem to like setting minDate to a date after the first selected date.

I feel like there must be a better way to enforce minimum selection length…

hi @adambiggs, I’m trying to implement the same solution as you, did you manage to solve the problem with the set minDate on the range plugin ?