使用Yup在react-hook-form中校验MUI日期选择器的异常问题

需求场景 #

• 必填字段，不可留空
• 日期必须晚于今日起21天后的日期（minDate）
• 日期必须早于minDate起6个月后的日期（maxDate）

现有校验Schema（yup） #

import * as yup from 'yup'
import { addDays, addMonths, format} from 'date-fns'

const today = Date.now()
const minDate = addDays(today, 21)
const maxDate = addMonths(minDate, 6)

const schema = yup.object().shape({
 Date: yup
    .date()
    .min(minDate, `Date must be after ${format(minDate,'MM/dd/yyyy')}`)
    .max(maxDate, `Date must be before ${format(maxDate, 'MM/dd/yyyy') }`)
    .typeError("Date is required") 
})

不符合预期的表现 #

• 首次点击提交按钮时，显示typeError()提示（符合预期）
• 点击日历图标选择日期后，日期正常显示，错误提示消失（符合预期）
• 手动清除已选日期后，显示min()错误提示（不符合预期）

原因分析 #

日期随输入变化时触发了min()校验，当日期最终变为null时，优先触发范围校验错误，而非必填错误。

核心问题 #

手动清除已选日期后，是否应该显示typeError()（必填）提示，而非min()的范围提示？

日期选择器组件代码 #

import React, { useState } from 'react'
import { Controller } from 'react-hook-form'
import TextField from '@mui/material/TextField'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
import { addDays, addMonths, format, isValid } from 'date-fns'
const Calendar = ({ control, name, label, error, helperText, ...rest }) => {
  const today = Date.now()
  const [value, setValue] = useState(null);
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Controller
        name={name}
        control={control}
        render={({ field }) => (
          <DesktopDatePicker
            label={label}
            value={value}
            minDate={addDays(today, 21)}
            maxDate={addMonths(addDays(today, 21), 6)}
            onChange={(newValue) => {
              if (isValid(newValue))
              {
                field.onChange(format(newValue, 'MM/dd/yyyy'))
                setValue(newValue)
              } else
              {
                setValue(newValue)
              }
            }}
            renderInput={(params) =>
              <TextField
                margin='normal'
                helperText={helperText}
                {...params}
                {...rest}
                error={error}
              />
            }
          />
        )}
      />
    </LocalizationProvider>
  )
}

export default Calendar

内容的提问来源于stack exchange，提问作者aadlc