MUI X Date Picker验证生效但未显示红色边框问题求助

问题核心在于DatePicker不会自动将错误状态传递给内部的TextField，且你的写法中存在value类型不匹配的问题，导致样式无法正确触发。

修正方案 #

以下是调整后的完整代码，同时解决类型匹配和样式问题：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import dateFormat from 'dateformat';

// 验证Schema保持不变
const validationSchema = yup.object().shape({
  location: yup.string("Enter Location").required("Location is required"),
  adults: yup.number("Enter number of Adults").required("Adult is required"),
  currency: yup.string("Enter Currency").required("Currency is required"),
  checkin: yup.date().required("enter the date")
});

// Formik初始化示例
const formik = useFormik({
  initialValues: {
    location: '',
    adults: '',
    currency: '',
    checkin: null,
  },
  validationSchema,
  onSubmit: (values) => {
    // 提交逻辑
  },
});

// 修正后的DatePicker组件
<DatePicker
  label='check-in'
  renderInput={(params) => (
    <TextField
      {...params}
      // 明确绑定Formik的错误状态
      error={!!(formik.touched.checkin && formik.errors.checkin)}
      // 优先显示错误信息，无错误时保留原提示
      helperText={formik.touched.checkin && formik.errors.checkin 
        ? formik.errors.checkin 
        : params.helperText}
    />
  )}
  // 将Formik中存储的字符串日期转回Date对象，匹配DatePicker的value类型
  value={formik.values.checkin ? new Date(formik.values.checkin) : null}
  sx={{ width: '195px', margin: '10px 30px 10px 10px' }}
  onChange={(value) => {
    formik.setFieldValue("checkin", value ? dateFormat(value, "yyyy-mm-dd") : null);
  }}
  disablePast
  format='YYYY-MM-DD'
/>

关键调整点 #

1. 类型匹配：DatePicker的value需要是Date对象，而你之前存到Formik的是字符串格式的日期，因此需要将字符串转回Date后再传给DatePicker，避免内部状态异常。
2. 错误状态传递：必须在renderInput返回的TextField中手动设置error和helperText——DatePicker本身的error属性不会向下透传给内部的TextField。
3. helperText兼容：处理无错误时的默认提示，避免覆盖DatePicker自带的格式提示。

内容的提问来源于stack exchange，提问作者Haider Abbas Abidi