[英]How to set initial date in react-datepicker with Formik?
I get my date and time as string in UTC (2021-12-24T18:30:00+00:00) and try to set it as initial date for DatePicker.我将日期和时间作为 UTC (2021-12-24T18:30:00+00:00) 字符串获取,并尝试将其设置为 DatePicker 的初始日期。 The issue is that I get string in UTC instead of specified format initialy.
问题是我得到的是 UTC 字符串,而不是最初指定的格式。 After I change value manually everything is good.
在我手动更改值后,一切都很好。
Setting initial values:设置初始值:
<Formik
initialValues={{
startLocation: rideDetails.startLocation,
endLocation: rideDetails.endLocation,
startDateAndTime: rideDetails.startDateAndTime,
car: rideDetails.car,
availableSeats: rideDetails.availableSeats,
price: rideDetails.price,
}}
...
My component:我的组件:
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}
</>
);
};
Okay, I solved this by setting my date in state as Date object instead of string.好的,我通过将 state 中的日期设置为日期 object 而不是字符串来解决这个问题。
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,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.