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

【问题标题】：How to set initial date in react-datepicker with Formik?如何使用 Formik 在 react-datepicker 中设置初始日期？
【发布时间】：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

【问题讨论】：

标签： reactjs formik react-datepicker

【解决方案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,
});

【讨论】：