Locale en Date pickers @ React-Admin

Solución Locale en Date pickers en componentes de React-Admin

Utilizando mongoose, los valores tipo date se guardaran en la base de datos en el siguiente formato: 2019-11-27T00:00:00.000Z

Utilizando los componentes por defecto de RA para manejo de fechas(DateField, DateInput), notaremos que las fechas no se muestran correctamente.

Esto sucede debido a que el locale(en nuestro caso está seteado en el componente Admin, en el archivo app.js), no se captura correctamente por los date pickers.

Solución

Para mostrar correctamente las fechas en el modo lista, tendremos que configurar la opción timeZone como en el sig. ejemplo:

  <DateField 
    source="date" 
    options={{ timeZone: 'UTC' }} 
  />

Y para leer los campos que vienen de la base de datos, y mostrarlos correctamente en el modo edición:

  <DateInput
    source="date"
    options={{ timeZone: 'UTC' }}
    format={conversions.formatDate}
  />

Y la función formatDate será la sig.:

const formatDate = date => new Date(date).toISOString().slice(0, 10);

De esta manera, le estamos quitando los últimos caracteres que son los que corresponden a el horarios de la fecha, que en este caso no estamos utilizando.

Links útiles: