Multiple Range Limits

Date and time pickers
1

how can I set multiple range limits on different dates.

Like as a default i want the range should be Atleast 3 days.
But on like 25 dec to 1st jan … I want user to select dates with range of 5 days atleast. User won’t be able to select range of less than 5 days during those dates

2

Hi @Hisham :wave:

You can change the minRange option dynamically using the onTempChange event. The onTempChange event is fired when the user changed a date on the calendar. It can be the start date or the end date as well, the onTempChange will fire. The event.value property will hold the currently selected value on the datepicker. You can check if the start date is between the desired period and set the minRange option according to that. Here’s an example:

let minRange = 3; // 3 days
datepicker('#my-input', {
  select: 'range',
  minRange,
  onTempChange: function (ev, inst) {
    const value = ev.value;
    let newMinRange = minRange;
    // check if we selected the start
    if (value && value[0]) {
      const startDate = value[0];
      // set new minRange depending on start date selected
      // (min 5 days between dec 20 - jan 2, otherwise min 3 days)
      if (startDate > new Date(2021, 11, 20) && startDate < new Date(2022, 0, 2)) {
        newMinRange = 5;
      }
      else {
        newMinRange = 3;
      }
    }

    if (newMinRange !== minRange) {
      minRange = newMinRange;
      inst.setOptions({ minRange: newMinRange });
    }
  }
})

Please let me know if that works!