Estoy tratando de agregar un selector de fecha usando react-datepicker pero cuando lo probé en codesandbox , recibí este mensaje de error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. aunque ya puse import { DatePicker } from "react-datepicker"; y agregue el paquete react-datepicker en la lista de dependencias.
aquí está mi código:
import { useState } from "react"; import { DatePicker } from "react-datepicker"; export default function App() { const [startDate, setStartDate] = useState(new Date()); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> </div> </div> ); }En la Línea 2, cambia a: import DatePicker from "react-datepicker";
¡Eso debería resolver tu problema!
Aquí hay un ejemplo. En este, seleccionamos un mes de datepicker.
import React, { useCallback, useState } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; const YourComponent = () => { const [date, setDate] = useState<Date>(null); const onDateChangeHandler = useCallback(date => setDate(date), [date]); return ( <div className="position-relative"> <DatePicker className="form-control w-100 text-center" placeholderText="Select date" selected={date} onChange={onDateChangeHandler} dateFormat="MM/yyyy" showMonthYearPicker showFullMonthYearPicker showTwoColumnMonthYearPicker dropdownMode="select" /> </div> ); };Otras lecturas
He hecho algunos cambios en el código, prueba esto, debería funcionar.
import { useState } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; export default function App() { const [startDate, setStartDate] = useState(new Date()); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> </div> </div> ); }