feat: add disabled dates list or callback prop

[mitri-dvp]

Feature: Disable Custom Dates

In support of adding a feature that allows disabling custom dates I've added a prop disabledDates that accepts an array of dates (DateType[]) or a validation function ((date: dayjs.Dayjs) => boolean)

This change is very similar to JHPG PR but with the added compatibility for the disabled dates list inspired by the handling found in Stephy CalendarPicker project and adapted to use existing functionality like the areDatesOnSameDay method

An example of both was added to the example app App.tsx.

Demo (included in the example app comments) - disable weekends

[timdimas]

@mitri-dvp I noticed a small bug in your code where if you had minDate or maxDate they wouldn't work and they would be overlapped by disabledDates here is a fix for that:

  if (minDate) {
    disabled = disabled || date < getDate(minDate);
  }
  if (maxDate) {
    disabled = disabled || date > getDate(maxDate);
  }
  if (disabledDates) {
    if (Array.isArray(disabledDates)) {
      const dates = disabledDates.filter((disabledDate) =>
        areDatesOnSameDay(date, disabledDate)
      );
      disabled = disabled || dates.length > 0;
    } else if (disabledDates instanceof Function) {
      disabled = disabled || disabledDates(date);
    }
  }

[mitri-dvp]

@timdimas Good catch, I'll update the PR with this fix. Since it's getting a little messy I'll refactor it into a new isDateDisabled helper method, similar to the other ones.

[timdimas]

@mitri-dvp Great stuff, also i have been thinking, if you have the mode="range" and you put a range before and after the disabled dates, the disabled dates will be selected even thought they are disabled. Even thought it's a simple fix on the onChange function where you check for your disabled dates and if they overlap return null, i feel like this logic should be applied automatically, when you have disabled dates. I will look into in more and try to help you.

    interface DateRange {
        startDate: DateType;
        endDate: DateType;
    }

    function checkOverlap(range: DateRange, disabledDates: Date[]): boolean {
        const start = dayjs(range.startDate);
        const end = dayjs(range.endDate);

        return disabledDates.some((date) => {
            const disabledDate = dayjs(date);
            return disabledDate <= end && disabledDate >= start;
        });
    }

the code should look like this

[farhoudshapouran]

This approach covers previous PR's 👍🏻