es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo configurar la fecha inicial en react-datepicker con Formik?

24 Jul, 2023 Programación

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

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    import moment from 'moment';

// ...

<datepicker ...="" selected="{" (field.value="" &&="" moment.utc(field.value).todate())="" ||="" null="" }="" onchange="{(date)" ==""> {
    setFieldValue(
      field.name,
      moment(date).utc().format('YYYY-MM-DDTHH:mm:ss[Z]')
    );
  }}
/>

    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.

Comments are closed.