Flatpicker Min Days For Range Date

I want to add a minimal range of days when user pick a range date.I'm trying to do that by disable dates dynamically . Lets say i want : var minRangeDays = 6; When user pick the f

Solution 1:

This not possible in using flatpickr , because in your case , you want a range of date ,which mean result of an array with begin and end , thus no breaking date between the start and end ,

So by design in this plugin it's not possible to break a range in multiple disabled dates ,

By example , in the below snippet I've catch the start date , in the onchange event, then tried to set a range check in the disable function as below snippet :

Conclusion won't work

See example snippet :

$(function() {
  var minRangeDays = 6;
  
  let startDate = null; 
  
  flatick = $("#startDate").flatpickr({
    mode: "range",
    minDate: "today",
    enableTime: true,
    dateFormat: "H:i",
    altInput: true,
    altFormat: "F j, Y at H:00",
    dateFormat: "Y-m-d H:00",
    onChange: [function(selectedDates){
       console.log(selectedDates)
       startDate = selectedDates[0] ? selectedDates[0] : null;
    }],
    disable: [
      function(date) {
         
        
        console.log(date.getDate() > startDate);
        if(startDate) {
          let endRange = newDate(startDate);
          endRange.setDate(endRange.getDate() + minRangeDays);
          console.log(date.getTime() > startDate.getTime() && date.getTime() < endRange.getTime())
          return (date > startDate && date < endRange); 
        }
        returnfalse;
      }
    ]
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css"rel="stylesheet" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script><inputid="startDate" />