Question 282077 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why does MUI DatePicker pass on only 1-digit of the year?

I am trying to setup a regestration form with MUI Fields and the input Field for a date does not work propably. When I enter a date days and month a passed on correctly but when it comes to the year it only passes the digit that was entered. E.g. when I enter 08.11.2023 it only passes 08.11.3. I figured out that when I edit one of the other digits in e.g. month it completes the year to 2023. Selecting a date via the date picker table does not work either.

The variables:

  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]);

The change function:

  function handleChange(event) {

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

form Data:

  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);
    }
  };

The input Field:

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

I have also tried this, which worked fine but it is not the best solution in my opinion:

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found my mistake. What I am doing now is: I defined the variables as before. I deleted the handleChange event and define the formData within the handleSubmit function:

      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 v4 = DOB_REGEX.test(dob)
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);
const v10 = ((housenumberadd==='')? true : NUMBERADD_REGEX.test(housenumberadd));
if (!v1 || !v2 || !v3 || !v4 || !v5 || !v6 || !v7 || !v8 || !v9 || !v10) {
  setErrMsg("Invalid input");
  return;
}
const formData = {
  firstname: firstname,
  lastname: lastname,
  dob: dob,
  street: street,
  housenumber: housenumber,
  housenumberadd: housenumberadd,
  plz: plz,
  city: city,
  email: email,
  phonenr: phonenr,
  pid: pid,
  password: password,
};
console.log(formData);

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);
}

    }; I changed the DatePicker onChange to the following:

    onChange={(e) => {
                  setDOB(dayjs(e).format("DD.MM.YYYY"));

  2. 0

    The DatePicker is using AdapterDayjs. The DatePicker’s onChange handler receives a DayJs object, not a date string or native JavaScript Date object. (Here’s the syntax for the JavaScript Date constructor for reference).

    Try changing this:

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

    by converting the DayJs object to a date string:

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

    or converting the DayJs object to a native JavaScript Date object:

    onChange={(e) => {setDOB(new Date(e.toDate()))}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search