es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede obtener el valor del DatePicker de Material UI.

26 Jul, 2023 Programación

Soy nuevo en react y ahora quiero poder tener un componente reutilizable para la entrada de fecha, pero no puedo obtener los valores devueltos desde el componente hacia el registro.

Aquí está el código de mi formulario:

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@mui/material";
import FDate from "../../Components/Forms/FDate";

function AltaArtista() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      console.log(data);
    } catch (e) {}
  };

  return (
    <div>
        <fdate label='Fecha de Nacimiento' register="{{" ...register("nacimiento",="" {="" required:="" true="" })="" }}=""></fdate>
        <button variant='contained' type='submit'>
          date input
        </button>
      </form>
    </div>
  );
}

Y aquí está mi componente FDate:

import * as React from "react";
import { TextField } from "@mui/material";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

function Fdate(props) {
  const [value, setValue] = React.useState(new Date());

  const handleDate = (newValue) => {
    setValue(newValue);
    console.log(newValue);
  };

  return (
    <localizationprovider dateadapter="{AdapterDateFns}">
      <datepicker label="{props.label}" value="{value}" onchange="{handleDate}" renderinput="{(params)" ==""> <textfield {...params}=""></textfield>}
      />
    </datepicker></localizationprovider>
  );
}

export default Fdate;

Cuando imprimo newValue en handleDate, puedo obtener la hora seleccionada en el datePicker, pero el valor que se devuelve al formulario es la fecha seleccionada cuando la aplicación se inicia y no cambia, cualquier pensamiento será muy apreciado.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el valor de la fecha seleccionada esté disponible para el componente padre, debes pasarlo como parámetro a una función en el componente padre. En este caso, puedes pasar el valor de la fecha seleccionada en FDate a la función onChange del registro.

    Aquí tienes cómo puedes modificar el código:

    1. En el componente padre, actualiza el register para incluir una función onChange que actualice el valor del campo nacimiento con la fecha seleccionada.
        const { register, handleSubmit, formState: { errors } } = useForm();

    const handleDateChange = (date) => {
      register("nacimiento").onChange(date);
    };

    return (
        <div>
            <fdate label='Fecha de Nacimiento' onchange="{handleDateChange}"></fdate>
            <button variant='contained' type='submit'>
              date input
            </button>
          </form>
        </div>
      );
    1. En el componente FDate, pasa el valor de la fecha seleccionada a la función onChange del componente padre.
    function Fdate(props) {
  const [value, setValue] = React.useState(new Date());

  const handleDate = (newValue) => {
    setValue(newValue);
    props.onChange(newValue);
  };

  return (
    <localizationprovider dateadapter="{AdapterDateFns}">
      <datepicker label="{props.label}" value="{value}" onchange="{handleDate}" renderinput="{(params)" ==""> <textfield {...params}=""></textfield>}
      />
    </datepicker></localizationprovider>
  );
}

    Al hacer esto, el valor de la fecha seleccionada estará disponible para el componente padre y se incluirá en el objeto data cuando se envíe el formulario.

Comments are closed.