9

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.

Bug image 1 Bug image 2 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");
3

2 Answers 2

22

You have to add this code to your index app file

import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'

dayjs.extend(customParseFormat)
dayjs.extend(advancedFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)
2
  • Your solution worked correctly, but it would be good if describe what is the problem and how it helps to fix the problem. Commented Nov 28, 2023 at 21:56
  • 1
    This took me a long time to find. Thanks!
    – hahuaz
    Commented Mar 6 at 16:33
0
import * as dayjs from 'dayjs'
import * as isLeapYear from 'dayjs/plugin/isLeapYear' // import plugin
import 'dayjs/locale/zh-cn' // import locale

dayjs.extend(isLeapYear) // use plugin
dayjs.locale('zh-cn') // use locale

I think it help you Could you add code into file index.tsx or index.js of root app

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 28, 2023 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.