Disable auto adjust date when date is out of min and max date range

[Nichtmetall]

Describe the bug Is there a way to turn off the automatic date reset by manually entering the date in the text field if the date is outside the minimum and / or maximum range? Example: If I have set the maximum to 06.11.2023 and I enter 12.12.2023, the date is automatically set to 06.11.2023. Unfortunately, I would like to display an error message saying that the maximum has been exceeded. However, I cannot check this, as the field adjusts automatically. Is there a way to switch off this function or display the error message in another way? At the moment I work around the problem by simply not entering a minimum and maximum date but still validating it via a function. However, it is possible to select days outside the minimum and maximum dates, which is not what I want.

Btw I am using react-hook-form

Validation:

function checkDateValidation(date: string | undefined) {
    if (props.maxDate && date && isAfter(parseISO(date), props.maxDate)) {
      return `Maximales Datum überschritten: ${t('dateFormat', { date: props.maxDate })}`;
    } else if (props.minDate && date && isBefore(parseISO(date), props.minDate)) {
      return `Minimales Datum unterschritten: ${t('dateFormat', { date: props.minDate })}`;
    } else {
      return true;
    }
  }

Component

<DatePicker
        {...props}
        {...register(field, {
          required: { value: required, message: 'Dieses Feld darf nicht leer sein!' },
          validate: checkDateValidation,
        })}
        autoComplete='off'
        showYearDropdown
        showMonthDropdown
        id={generateID(field, 'input', parentName, index, { suffix: 'picker' })}
        showPopperArrow={false}
        locale={'de'}
        dateFormat={'dd.MM.yyyy'}
        placeholderText="TT.MM.YYYY"
        customInput={Ï
          <InputMask mask={'99.99.9999'} alwaysShowMask={false}>
            <Input
              {...inputProps}
              id={generateID(field, 'input', parentName, index)}
              isInvalid={errors?.[field] ? true : false}
              errorMessage={<div id={generateID(field, 'input', parentName, index, { suffix: 'error-message' })}>{errors?.[field]?.message}</div>}
              isDisabled={inputProps?.isDisabled === false ? checkboxProps?.value : inputProps?.isDisabled}
              onClear={() => setValue(field, undefined)}
              endContent={<FontAwesomeIcon id={generateID(field, 'button', parentName, index, { suffix: 'clear' })} icon={faCircleXmark} size={'sm'} />}
              label={
                <>
                  {inputProps?.label}
                  {required && <span className="text-danger-500"> *</span>}
                </>
              }
            />
          </InputMask>
        }
        selected={watch(field)! ? parseISO(watch(field)!) : null}
        onChange={(date) => handleOnChange(date)}
      />

Desktop (please complete the following information):

• OS: [MacOS]
• Browser [Chrome]

[sandrina-p]

I have the same problem. Have you find a solution for this @Nichtmetall ?

[naveennsit]

any update ?