Prevent select when disabled dates are in range

[Eldzej]

This is a possible duplicate of two existing issues ( #348 and #423 ), but those have not seen any activity in 2+ years now (and dating to the jQuery-dependent version)

When using range selection, there should be an option to allow disabled days (with default probably set to false, which is the more common usecase, I imagine). If the option is set to false and disabled dates are in range, the selection should simply not happen, and everything should unselect (or remain on the previous selected range)

For the moment, it is doable with a bit of hacking around (see below, using Day.js library), but it would be nice to have by default in ADP

const disabledDays = ['2023-03-01', '2023-03-02', '2023-03-03', '2023-03-10', '2023-03-16']

onSelect: ({ date, formattedDate, datepicker }) => {
    if (date.length > 1) {
        const dateFormattedFrom = dayjs(date[0]).format('YYYY-MM-DD')
        const dateFormattedTo = dayjs(date[1]).format('YYYY-MM-DD')
        let disabledInRange = false

        disabledDays.forEach(day => {
            if (dayjs(day).isBetween(dateFormattedFrom, dateFormattedTo)) {
                disabledInRange = true
            }
        })

        if (disabledInRange) {
            datepicker.clear()
            ;[...datepicker.$datepicker.querySelectorAll('.-in-range-')].forEach(day => day.classList.remove('-in-range-'))
        }
    }
}

[t1m0n]

Hmm, honestly this doesn't seem like a must have native feature. It is vary from user's needs, for instance, how many disabled dates should be in range to consider it as a disabled, should calendar disable range or just show tooltip with warning, should it disable range when user focuses on cell or when he selects one, etc.

I think I will add onFocus event or smth similar to gain more control, then user can create any behaviour that he wants.

[t1m0n]

@Eldzej added some new options which grant you more control over range behaviour. Added example of disabled range under Prohibiting range selection section https://air-datepicker.com/examples