Estoy pasando una fecha simple como una cadena de api, algo así como 2022-04-24 , pero en la reacción frontal, está analizando la fecha en la zona horaria local, que no quiero que se analice en la zona horaria local. Mi código en reaccionar se parece a:
import { useForm, Controller } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as Yup from "yup"; import ReactDatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; export function App() { const schema = Yup.object({}); const { register, handleSubmit, formState: { errors }, control } = useForm({ resolver: yupResolver(schema) }); const onSubmit = async (input) => { console.log("input", input); }; const item = { id: 12, release_date: "2022-04-24" }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller control={control} name="release_date" defaultValue={item.release_date ? new Date(item.release_date) : null} render={({ field: { onChange, onBlur, value, ref } }) => ( <ReactDatePicker onChange={onChange} onBlur={onBlur} className="form-control w-full" dateFormat="MMM dd, yyyy" selected={value} /> )} /> <input type="submit" /> </form> ); }Aquí está la captura de pantalla,
Actualmente, se muestra apr 23 , incluso cuando lo había pasado el 04-24 . Para ver el problema, es posible que deba usar una zona horaria diferente (donde la fecha actual es el apr 23 ).
Y, aquí está la caja de arena .
Hay una diferencia cuando usas - y /
const date1 = new Date("2022/04/24"); const date2 = new Date("2022-04-24"); document.getElementById("app").innerHTML = ` <h4>${date1}</h4> <h4>${date2}</h4> `; <div id="app"> </div>