How to get date from IonDateTime with Ionic React-CodePudding

I have recently started using react due to the performance it provides, so I'm not used to this new framework. I have searched on this exact topic but cannot find an answer.

Although the problem is very simple, (Just want to return the selected date).

Here's what I currently am trying to do:

        let dateValue = format(new Date(), 'yyyy-MM-dd')  'T09:00:00.000Z';

        const dateChanged = (value: any) => {
        console.log("value: ", value);
        dateValue = value;
        };

        const DateModal: React.FunctionComponent<any> = ({ isOpen, onClose }) => {
        return (
          <IonModal className="datemodal" isOpen={isOpen}>
            <IonContent className="dateModalOpen">
              <IonDatetime
                locale="en-GB"
               value={dateValue}
               id="datetime"
                onChange={() => dateChanged(datetime)}
                showDefaultButtons={true}
                min="1920"
                max="2022"
                className="calendar"
                presentation="date"
              >
                <span slot="title">Date of Birth</span>
              </IonDatetime>
            </IonContent>
          </IonModal>
        );
      };

I recieve an error on the "onChange" (Cannot find name 'datetime'.), this is what I used to do in Angular. I tried to use a template reference by doing "id=datetime", which in Angular was "#datetime". And in so doing would work inside the onChange event.

How do I make this work? Thank you in advance!

CodePudding user response：

Solved. On react you can use "Controller" to get the data from IonDateTime as follows:

const {
    handleSubmit,
    control,
    setValue,
    register,
    getValues,
    formState: { errors },
  } = useForm({
    defaultValues: {
      fullname: "",
      date: "",
      gender: "MALE",
      email: "",
    },
  });
  console.log(getValues());

  /**
   *
   * @param data
   */
  const onSubmit = (data: any) => {
    alert(JSON.stringify(data, null, 2));
  };

const [ionDate, setIonDate] = useState("");

  const dateChanged = (value: any) => {
    let formattedDate = format(parseISO(value), "dd-MM-yyyy").replace(
      /-/g,
      "/"
    );
    setIonDate(formattedDate);
    setshowDate({ isOpen: false });
  };

  const DateModal: React.FunctionComponent<any> = ({ isOpen }) => {
    console.log(isOpen);
    return (
      <IonModal className="datemodal" isOpen={isOpen}>
        <IonContent className="dateModalOpen">
          <Controller
            render={({ field }) => (
              <IonDatetime
                value={field.value}
                onIonChange={(e) => dateChanged(e.detail.value)}
                locale="en-GB"
                onChange={dateChanged}
                showDefaultButtons={true}
                onIonCancel={() => setshowDate({ isOpen: false })}
                min="1920"
                max="2022"
                className="calendar"
                presentation="date"
              >
                <span slot="title">Date of Birth</span>
              </IonDatetime>
            )}
            control={control}
            name="date"
            rules={{ required: "This is a required field" }}
          />
           <IonButton type="submit">submit</IonButton>
        </IonContent>
      </IonModal>
    );
  };
};

CodePudding user response：

You just need to use the ionOnChange handler:

<IonDatetime presentation="date"
             id="datetime"
             onIonChange={(e) => console.log(e)}>
</IonDatetime>