无法将名称或 ID 分配给 DatePicker 组件以进行 Yup 验证

Question

我有一个 Formik 表单，它使用 Yup 进行验证。我的字段之一是日期选择器，但我无法将其集成到 yup 验证中。

下面是渲染组件的代码，但是一旦我尝试将其包装在标签<DatePicker/>内<Field name="date></Field>，就不会渲染任何内容。

    const [fieldDate,setFieldDate] = useState ("");
const dateSchema = Yup.object().shape({
  date: Yup.date().required('Date is required'),
});
   const initialValues = {date:''};
    return (
     
      <div>

        <FormContainer>
             
              <Formik
                initialValues={initialValues}
                //validationSchema={loginValidationSchema}
                validationSchema={dateSchema}
                onSubmit={()=>{console.log ("ok")}}                
              >
                {({ isSubmitting, values, setFieldValue, handleChange, handleBlur, errors, touched }) => (
                <Form className="form">
                  <LocalizationProvider dateAdapter={DateFnsUtils}>
                    <DatePicker
                      label="Date"
                      value={fieldDate}
                      onChange={(newValue:any) => {
                       setFieldDate(newValue);
                      }}
                      renderInput={(params) => <TextField {...params} />}
                    />
                  </LocalizationProvider>
                    <div className="buttonWrapper">          
                          <SubmitButton  type="submit" className="SubmitButton">Submit</SubmitButton>           
                    </div>
                    
                </Form>
             )}
          </Formik>
         
        </FormContainer>
      </div>
         

这是我的导入...我将它们包括在内是因为我发现 MUI 中有多个同名的库，它们具有不同的父目录和不同的要求，这在尝试通过在线解决方案解决此问题时在某种程度上增加了我的困惑：

import React, { useState} from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import {FormContainer,FieldContainer, SubmitButton } from "../GlobalStyle";
import { TextField } from "@mui/material";
import * as Yup from "yup";
import "react-datepicker/dist/react-datepicker.css";

  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import DateFnsUtils from "@date-io/date-fns";
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

谢谢！

Answer 1

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    format={DATE_FORMAT}
    slotProps={{
      textField: {
        required: true,
        id: 'ReportDate',
      },
    }}
  />
</LocalizationProvider>

尝试 slotProps