feat(disable-dates): disable certain dates that should not be selected by users

[caseybrookes]

Feature request

Goal: disable dates that user should not be able to select.
Effect: makes it possible for users to not be able to select invalid dates, significantly improving the user experience.

Use Cases:

1. there are no appointment available on certain days or day is fully booked, but user has to click through each day anyway trying to find an available appointment
2. team member reviewing scheduled events coming up, having to click through every day even though a small percentage of the dates actually have events going on
3. projects found by deadline date --> team has to look through each date trying to find when project deadlines are and prepare ahead

In all these use cases, only certain dates should be clickable, all others should be disabled.

Why it is needed

Why:

• poor user experience --> painful and time-consuming for users to click through every date trying to find events or appointment slots on days where there are none.

Possible implementation

follow the pattern established by mui/date-picker#prop:shouldDisableDate

add a prop called 'shouldDisableDate'

Type: func
Signature: function(day: TDate) => boolean
Returns: If true the date will be disabled.

Code sample

                     <DateTimePicker
                        themeVariant="light"
                        value={pendingSelectedDate}
                        mode="time"
                        is24Hour={true}
                        onChange={onChange}
                        shouldDisableDate={(date) =>
                           !dateOptions.includes(format(date, 'yyyy-MM-dd'))}
                      />

[vonovak]

Hello and thanks for asking,
what you're saying is true, but unfortunately cannot be done with the native components that the library is built on top of. You're going to need to use some other RN library.

Let's track this under #790
Thank you 🙂