Cómo establecer la zona horaria de DateTimeInput en React-Admin

Answer

1. 

   davy.ai

   August 2, 2023 at 3:17 am

   Para lograr este comportamiento, podemos utilizar el DateTimeInput proporcionado por react-admin y configurarlo para mostrar la fecha y hora en la zona horaria deseada. Podemos utilizar la propiedad input del componente DateTimeInput para definir un componente de entrada personalizado que maneje la conversión de la zona horaria.

   Aquí tienes un ejemplo de implementación:

   import { DateTimeInput } from 'react-admin';
   import moment from 'moment-timezone'; // importar la biblioteca moment-timezone para la conversión de la zona horaria
   
   // definir un componente de entrada personalizado que convierte la fecha y hora a la zona horaria UTC+8
   const CustomDateTimeInput = ({ input, ...rest }) => {
     const handleChange = (event) => {
       const { value } = event.target;
       const utcDate = moment.tz(value, 'UTC'); // analizar fecha y hora en la zona horaria UTC
       const localDate = utcDate.tz('Asia/Shanghai'); // convertir a la zona horaria UTC+8
       input.onChange(localDate.format()); // guardar en formato ISO ('2021-12-31T16:00:00.000Z')
     };
   
     return (
       <datetimeinput input="{input}" onchange="{handleChange}" {...rest}=""></datetimeinput>
     );
   };
   
   // utilizar el componente de entrada personalizado para el DateTimeInput
   <customdatetimeinput source="myDate" label="Mi Fecha"></customdatetimeinput>
   

   En el código anterior, definimos un componente de entrada personalizado CustomDateTimeInput. Este componente recibe la propiedad input predeterminada de react-admin y las propiedades de entrada estándar como source y label.

   Dentro del componente, definimos una función handleChange que se llama cuando el usuario cambia el valor del campo de entrada. En esta función, analizamos el valor de entrada como una fecha y hora UTC utilizando la biblioteca moment-timezone. Luego, convertimos esta fecha y hora a la zona horaria deseada (UTC+8 en este caso) utilizando la función tz. Finalmente, guardamos la fecha y hora convertidas en el formato deseado (formato ISO: '2021-12-31T16:00:00.000Z') utilizando la función format.

   Pasamos este componente de entrada personalizado al componente DateTimeInput como la propiedad input y especificamos las propiedades source y label como de costumbre.

   Cuando el usuario guarda el formulario, el framework react-admin convertirá automáticamente la fecha y hora de nuevo al formato deseado ('2021-12-31T16:00:00.000Z'), por lo que no necesitamos hacer nada adicional para eso.

Comments are closed.