I upgraded the Ant Design version from 4 to 5 and replaced Moment with Day.js, then encountered this error.
const {
field,
fieldState: { error },
} = useController({ name: name, control: control });
return (
<div>
<RangePicker
style={error ? errorStyle : defaultStyle}
format={customFormatList}
suffixIcon={<BsCalendarDate className="text-lg" />}
value={field.value}
onChange={(e) => {
field.onChange(e);
}}
onBlur={() => {
field.onBlur();
}}
onCalendarChange={(e) => {
field.onChange(e);
}}
{...rest}
/>
{error && <p className="text-sm text-[#ff4d4f]">{error.message}</p>}
</div>
);
Then, I set default value with react-hook-form:
const { control, handleSubmit, setValue, watch } = useForm<SearchFormInputValues>({
defaultValues: {
requestDate: [dayjs(), dayjs()],
},
resolver: yupResolver(schema),
});
...
<DateRangePicker
name="requestDate"
control={control}
placeholder={["dd-mm-yyyy", "dd-mm-yyyy"]}/>
It displays the correct date I need, but when I click to edit, an error occurs above. When I click the delete button next to it and select the date again, there will be no error.
I tried to fix this error by adding the following lines of code, but it's not working:
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import localeData from "dayjs/plugin/localeData";
dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale("en");
dayjs.locale("vi");