MUI X Date Picker仅传递年份单个数字问题求助

使用MUI组件搭建注册表单时，日期输入字段存在以下问题：

• 手动输入日期时，日和月能正常传递，但年份仅保留单个数字，例如输入08.11.2023时仅传递08.11.3
• 修改月或日的数字后，年份才会补全为2023
• 通过日期选择器面板选择日期完全无效

相关变量定义 #

const [dob, setDOB] = useState("");
const [validDOB, setValidDOB] = useState(false);
const [DOBFocus, setDOBFocus] = useState(false);

useEffect(() => {
  const today = new Date();
  const age = differenceInYears(today, dob);
  const result = DOB_REGEX.test(age);
  setValidDOB(result);
}, [dob]);

变更处理函数 #

function handleChange(event) {
  setFormData((prevFormData) => {
    return {
      ...prevFormData,
      [event.target.name]: event.target.value,
    };
  });
}

表单提交逻辑 #

const handleSubmit = async (e) => {
  e.preventDefault();
  const v1 = FIRSTNAME_REGEX.test(firstname);
  const v2 = PWD_REGEX.test(password);
  const v3 = LASTNAME_REGEX.test(lastname);
  const v5 = STREET_REGEX.test(street);
  const v6 = NUMBER_REGEX.test(housenumber);
  const v7 = PLZ_REGEX.test(plz);
  const v8 = PID_REGEX.test(pid);
  const v9 = MAIL_REGEX.test(email);
  if (!v1 || !v2 || !v3 || !v5 || !v6 || !v7 || !v8 || !v9) {
    setErrMsg("Invalid input");
    return;
  }
  setSuccess(true);
   
  try {
    const { data, error } = await supabase.auth.signUp({
      email: formData.email,
      password: formData.password,
      options: {
        data: {
          first_name: formData.firstname,
          last_name: formData.lastname,
          date_of_birth: formData.dob,
          street_form: formData.street,
          house_number: formData.housenumber,
          house_number_add: formData.housenumberadd,
          zip_code: formData.plz,
          city_form: formData.city,
          phone_nr: formData.phonenr,
          passport_ID: formData.pid
        },
      },
    });
    alert("Check your email for the verification link");
  } catch (error) {
    alert(error);
  }
};

当前使用的日期选择器组件代码 #

<FormControl>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DemoContainer
      components={['DatePicker']}
      sx={{ m: 1 / 2, width: "59ch" }}
    >
      <DatePicker
        label="Day of birth"
        slotProps={{ textField: { name: 'dob', id: 'dob', onInput: handleChange }}}
        //fullWidth="true"
        format="DD.MM.YYYY"
        //required
        autoFocus
        //color={validDOB ? "success" : "error"}
        onChange={(e) => {setDOB(new Date(e))}}
        inputRef={userRef}
        onFocus={() => setDOBFocus(true)}
        onBlur={() => setDOBFocus(false)}
        helperText={
          !DOBFocus
            ? ""
            : validDOB
            ? ""
            : "You must be 18 years old to register."
        }
      />
    </DemoContainer>
  </LocalizationProvider>
</FormControl>

临时可行的TextField方案（非最优解） #

<FormControl sx={{ m: 1 / 2 }}>
  <TextField
    label="Geburtsdatum"
    fullWidth="true"
    type="date"
    name="dob"
    id="dob"
    required
    autoFocus
    color={validDOB ? "success" : "error"}
    onInput={handleChange}
    onChange={(e) => {
      setDOB(e.target.value);
    }}
    inputRef={userRef}
    onFocus={() => setDOBFocus(true)}
    onBlur={() => setDOBFocus(false)}
    helperText={
      !DOBFocus
        ? ""
        : validDOB
        ? ""
        : "You must be 18 years old to register."
    }
  />
</FormControl>

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