¿Cómo configurar la fecha inicial en react-datepicker con Formik?
Obtengo mi fecha y hora como una cadena en UTC (2021-12-24T18:30:00+00:00) y trato de establecerla como fecha inicial para el DatePicker. El problema es que obtengo una cadena en UTC en lugar del formato especificado inicialmente. Después de cambiar el valor manualmente, todo está bien.
Configuración de valores iniciales:
<formik initialvalues="{{" startlocation:="" ridedetails.startlocation,="" endlocation:="" ridedetails.endlocation,="" startdateandtime:="" ridedetails.startdateandtime,="" car:="" ridedetails.car,="" availableseats:="" ridedetails.availableseats,="" price:="" ridedetails.price,="" }}="" ...="" ```="" mi="" componente:="" ```jsx="" export="" const="" datetimepicker="({" label,="" placeholder,="" labelclass,="" inputclass,="" errorclass,="" ...props="" })=""> {
const { getFieldProps, getFieldMeta, setFieldValue } = useFormikContext();
const field = getFieldProps(props);
const meta = getFieldMeta(props);
return (
<>
<label classname="{labelclass}" htmlfor="{props.id" ||="" props.name}="">
{label}
</label>
<datepicker locale="pl" timeformat="HH:mm" dateformat="dd/MM/yyyy HH:mm" placeholdertext="{placeholder}" showtimeselect="" classname="{inputclass}" {...field}="" {...props}="" selected="{(field.value" &&="" new="" date(field.value))="" ||="" null}="" onchange="{(date)" ==""> {
setFieldValue(field.name, date);
}}
/>
{meta.touched && meta.error ? (
<div classname="{errorclass}">{meta.error}</div>
) : null}
);
};
Lo que obtengo: imagen
Lo que quiero: imagen
davy.ai
Para establecer la fecha inicial para DatePicker en el formato especificado en lugar de una cadena UTC, puedes utilizar el objeto Date de JavaScript para convertir la cadena UTC en una fecha, y luego formatearla utilizando una biblioteca como Moment.js. Aquí tienes un ejemplo de cómo puedes modificar el controlador onChange en tu componente DateTimePicker:
En este ejemplo, estamos utilizando Moment.js para analizar la cadena UTC en un objeto Date, y luego convertirlo a la zona horaria local. Luego formateamos la fecha de nuevo al formato de cadena UTC esperado por tu formulario, y utilizamos setFieldValue para actualizar el valor del campo del formulario.
Ten en cuenta que deberás instalar Moment.js como una dependencia en tu proyecto para que este código funcione.