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.

Obtener el valor de fecha de React DatePicker en onChange

17 Jun, 2023 Programación

Estoy usando react-datepicker y no puedo obtener la fecha real en onChange. Este es mi componente:

import DatePicker from "react-datepicker";

const DatePick = () => {
  return (
    <DatePicker
      locale="fr"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        console.log(date);
      }}
    />
  );
};

export default DatePick;

En el console.log, obtengo una cadena como esta: Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale). Necesito obtener la fecha en formato dd-MM-yyyy en onChange, o una fecha que pueda formatear y usar más tarde en un formulario para enviar su valor.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener la fecha en formato dd-MM-yyyy, puedes utilizar la función format proporcionada por react-datepicker y pasar el formato deseado como argumento. Aquí tienes una versión actualizada de tu componente que registra la fecha en el formato deseado:

    import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DatePick = () => {
  return (
    <datepicker locale="fr" dateformat="dd/MM/yyyy" onchange="{(date)" ==""> {
        console.log(date.toLocaleDateString("en-GB")); // registra la fecha en formato "dd-MM-yyyy"
      }}
    />
  );
};

export default DatePick;

    Ten en cuenta que primero importamos el archivo CSS de react-datepicker. Luego, en la función onChange, llamamos al método toLocaleDateString en el objeto date y pasamos la localización deseada (en-GB) para obtener la fecha en formato dd-MM-yyyy.

    Ahora puedes usar el valor de fecha formateado en el resto de tu aplicación según sea necesario, como enviarlo como valor de formulario.

Comments are closed.