DateRangePicker

[fluffybone]

Hi, I want to add minDate ,maxDate, disabledDates constraints for each of the dates - for the start date and also for the end date I'm using date-fns as a date library

Problem: As soon as I add conditions to the restrictions in disabledDate, I periodically have no success setting the start date I'm trying to solve this by adding an onCalendarChange handler, but in this case, when setting the date, the validation of the selected date does not pass

I would like to set the dates for the restriction something like this:

<DateRangePicker
        dateFromConfig={{
          placeholder: placeholder.date_from,
          minDate: min.date_from,
          maxDate: max.date_from,
          disabledDates: disabledDatesFrom,
        }}
        dateToConfig={{
          placeholder: placeholder.date_to,
          disabledDates: disabledDatesTo,
          maxDate: max.date_to,
          minDate: min.date_to,
      }}

This is roughly what it looks like now

import { format as formatDate, parse as parseDate } from 'date-fns';

   <BaseDateRangePicker
        allowEmpty={[true, true]}
        aria-invalid={error ? true : false}
        disabled={isDisabled ? [true, true] : [dateFromConfig?.isDisabled ?? false, dateToConfig?.isDisabled ?? false]}
        disabledDate={(currentDate, info) => {
          const isDisableDatesFullPeriod = disabledDate?.(currentDate, info) ?? false;

          if (dateFromConfig?.maxDate && focusedCalendarInputRef.current === 'from') {
            let isDisabledDate = false;

            if (dateFromConfig.disabledDates) {
              isDisabledDate = isInValidDate({ disabledDates: dateFromConfig.disabledDates, date: currentDate });
            }

            return (
              currentDate > parseDate(dateFromConfig.maxDate, 'yyyy-MM-dd', new Date()) ||
              isDisabledDate ||
              isDisableDatesFullPeriod
            );
          }

          if (dateToConfig?.minDate && focusedCalendarInputRef.current === 'to') {
            let isDisabledDate = false;

            if (dateToConfig.disabledDates) {
              isDisabledDate = isInValidDate({ disabledDates: dateToConfig.disabledDates, date: currentDate });
            }

            return (
              currentDate < parseDate(dateToConfig.minDate, 'yyyy-MM-dd', new Date()) ||
              isDisabledDate ||
              isDisableDatesFullPeriod
            );
          }

          if (dateFromConfig && dateFromConfig.disabledDates && focusedCalendarInputRef.current === 'from') {
            return (
              isInValidDate({ disabledDates: dateFromConfig.disabledDates, date: currentDate }) ||
              isDisableDatesFullPeriod
            );
          }

          if (dateToConfig && dateToConfig.disabledDates && focusedCalendarInputRef.current === 'to') {
            return (
              isInValidDate({ disabledDates: dateToConfig.disabledDates, date: currentDate }) ||
              isDisableDatesFullPeriod
            );
          }

          return isDisableDatesFullPeriod;
        }}
        locale={SETTING_LOCALE}
        maxDate={maxCalendarDate}
        minDate={minCalendarDate}
        mode={['date', 'date']}
        onChange={(dates) => {

          if (dates === null) {
            onChange?.({ from: null, to: null });
          } else {
            const [dateFrom, dateTo] = dates;

            onChange?.({
              from: dateFrom ? formatDate(dateFrom, 'yyyy-MM-dd') : null,
              to: dateTo ? formatDate(dateTo, 'yyyy-MM-dd') : null,
            });
          }
        }}
   onCalendarChange={(date) => {
      **not working valid dates**
          onChange?.({
            from: date[0] ? formatDate(date[0], 'yyyy-MM-dd') : null,
            to: date[1] ? formatDate(date[1], 'yyyy-MM-dd') : null,
          });
        }}
        onFocus={(event, info) => {
          if (info.range === 'start') {
            focusedCalendarInputRef.current = 'from';
          }
          if (info.range === 'end') {
            focusedCalendarInputRef.current = 'to';
          }
          return onFocus?.(event, info);
        }}
        placeholder={[dateFromConfig?.placeholder ?? 'дд.мм.гггг', dateToConfig?.placeholder ?? 'дд.мм.гггг']}
        placement={placement ?? 'bottomLeft'}
        superNextIcon={false}
        superPrevIcon={false}
        value={[
          value.from ? parseDate(value.from, 'yyyy-MM-dd', new Date()) : null,
          value.to ? parseDate(value.to, 'yyyy-MM-dd', new Date()) : null,
        ]}
        width={164}
      />