为什么 MUI DatePicker 只传递年份的 1 位数字？

Question

我正在尝试使用 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>

我也尝试过这个，效果很好，但在我看来这不是最好的解决方案：

<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>

Answer 1

DatePicker 使用 AdapterDayjs。 DatePicker 的 onChange 处理程序接收 DayJs 对象，而不是日期字符串或本机 JavaScript Date 对象。 （以下是JavaScript Date构造函数的语法供参考）。

尝试改变这个：

onChange={(e) => {setDOB(new Date(e))}}

通过将 DayJs 对象转换为 日期字符串:

onChange={(e) => {setDOB(new Date(e.format( 'YYYY-MM-DD' )))}}

或者将 DayJs 对象转换为 原生 JavaScript Date 对象:

onChange={(e) => {setDOB(new Date(e.toDate()))}}