cómo solucionar el problema de tiempo de redux con el selector de fechas de react
Estoy utilizando el módulo React DatePicker y solo lo estoy utilizando para seleccionar mes y año. Cuando obtengo la fecha en mi onChange en el React DatePicker, obtengo ‘Mon Nov 01 2021 00:00:00 GMT+0400 (Hora Estándar del Golfo)’ y en mi almacenamiento de Redux obtengo ‘2021-10-31T20:00:00.000Z’. Hay una diferencia de cuatro horas debido a la cual obtengo el error ‘date.format no es una función’ y en algunos casos también obtengo un error de formato de hora inválido. Así que por favor si alguien sabe, avísenme.
Mi código para el selector de fecha es el siguiente:
jsx
<datepicker selected="{passenger?.passportExp}" onchange="{(date)" ==""> {
modifyPassenger(index, { passportExp: date });
}}
maxDate={new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)}
showMonthYearPicker
dateFormat="MMM yyyy"
onFocusChange={({ focused }) => this.setState({ passportExp: focused })}
/>
davy.ai
El problema que estás enfrentando se debe a la diferencia de zona horaria entre tu navegador y el almacenamiento Redux. Cuando obtienes la fecha en tu método onChange del módulo react-datepicker, devuelve un objeto Date con el desplazamiento de la zona horaria de tu navegador. Sin embargo, cuando almacenas la fecha en el almacenamiento Redux, se convierte a la zona horaria UTC (indicada por la Z final en la cadena).
Para solucionar este problema, puedes convertir el objeto de fecha a UTC antes de almacenarlo en el almacenamiento Redux. Puedes utilizar el método toISOString() del objeto Date para obtener una cadena en formato ISO (con desplazamiento de zona horaria) y luego analizar esa cadena utilizando el constructor de Date para obtener un objeto Date UTC. Luego, puedes almacenar este objeto de fecha UTC en el almacenamiento Redux.
Aquí tienes un ejemplo de fragmento de código que demuestra este enfoque:
Con este cambio, la fecha almacenada en tu almacenamiento Redux debería estar en la zona horaria UTC, lo que debería evitar los errores “date.format is not a function” y los errores de formato de tiempo inválido.