如何实现用户未选日期时，Date Picker显示必填提示信息？

你的代码中，DatePicker的错误提示逻辑未生效，核心问题是Controller的render函数未获取errors对象，同时还有几处逻辑需要调整，以下是修复方案：

修复后的完整代码 #

<Grid item xs={12} sm={2}>
  <Controller
    name='qobtrgtdt'
    control={control}
    rules={{
      required: 'This field is required' 
    }}
    render={({ field: { onChange, value }, errors }) => (
      <>
        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='en-gb'>
          <DatePicker
            disabled={isIssueToUser}
            value={ObsDataByID ? dayjs(ObsDataByID.qobtrgtdt) : null}
            label='OBSERVATION Target Dt'
            onChange={(date) => {
              onChange(date?.format('YYYY-MM-DD'))
            }}
            format='DD/MM/YYYY'
            minDate={dayjs()}
            slotProps={{
              textField: {
                size: 'small',
                margin: 'dense',
                style: { fontSize: 12 },
                error: Boolean(errors.qobtrgtdt),
                helperText: errors.qobtrgtdt ? errors.qobtrgtdt.message : '', 
                sx: {
                  input: { color: textColor },
                  label: { color: textColor }
                }
              }
            }}
          />
        </LocalizationProvider>
      </>
    )}
  />
</Grid>

关键修改点 #

• 获取errors对象：在Controller的render参数中解构errors，这是错误提示能读取到校验信息的前提。
• 修正初始value：把初始值从空字符串''改为null——dayjs处理空字符串会默认生成当前日期，导致表单校验误判字段已有值，跳过必填校验。
• 移除重复的setValue：Controller已通过onChange自动管理表单字段值，手动调用setValue会引发状态冲突，干扰校验逻辑。
• 简化disabled逻辑：isIssueToUser ? true : false可直接简化为isIssueToUser，逻辑一致且更简洁。

效果验证 #

• 未选择日期提交表单时，DatePicker下方会显示"This field is required"提示，输入框同步高亮错误状态。
• 选择日期后，错误提示自动消失，表单可正常提交。

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