如何使用 Formik 在 react-datepicker 中设置初始日期？

Posted 2023-02-18

【中文标题】如何使用 Formik 在 react-datepicker 中设置初始日期？

【英文标题】：How to set initial date in react-datepicker with Formik?

【发布时间】：2022-01-21 09:27:14

【问题描述】：

我以 UTC (2021-12-24T18:30:00+00:00) 字符串形式获取日期和时间，并尝试将其设置为 DatePicker 的初始日期。问题是我得到的是 UTC 字符串，而不是最初指定的格式。在我手动更改值后，一切都很好。

设置初始值：

<Formik
  initialValues=
    startLocation: rideDetails.startLocation,
    endLocation: rideDetails.endLocation,
    startDateAndTime: rideDetails.startDateAndTime,
    car: rideDetails.car,
    availableSeats: rideDetails.availableSeats,
    price: rideDetails.price,
  
  ...

我的组件：

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
    </>
  );
;

what I get

what I want

【参考方案1】：

好的，我通过将状态中的日期设置为日期对象而不是字符串来解决这个问题。

setRideDetails(
  startLocation: rideDetails.startFrom,
  endLocation: rideDetails.endIn,
  startDateAndTime: rideDetails.startTime,
  car: rideDetails.car.id,
  availableSeats: rideDetails.numberOfSeats,
  price: rideDetails.price,
);

--->

setRideDetails(
  startLocation: rideDetails.startFrom,
  endLocation: rideDetails.endIn,
  startDateAndTime: new Date(rideDetails.startTime),
  car: rideDetails.car.id,
  availableSeats: rideDetails.numberOfSeats,
  price: rideDetails.price,
);