Question 234539 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Unhandled Runtime Error TypeError: date.locale is not a function on Ant Design

How to resolve this "TypeError: date.locale"? I’m making an attempt to address this problem, but despite my efforts, I’m unable to find a solution.

API response:

{
  "birthday": "1999-03-09T00:00:00.000Z"
}

change date format

useEffect(() => {
    if (currentRecord) {
      const formattedBirthday = dayjs(currentRecord.birthday)
        .tz("Asia/Dhaka")
        .format("YYYY-MM-DD");
      setCurrentRecord({
        ...currentRecord,
        birthday: formattedBirthday,
      });

      form.setFieldsValue({
        birthday: moment(formattedBirthday),
      });
    }
  }, [currentRecord, setCurrentRecord, form]);

new date: birthday: "1999-03-09"

JSX –

<Form.Item
  label="Birthday"
  name="birthday"
  rules={[
    { required: true, message: "Please select a birthday!" }
  ]}
>
  <DatePicker
    style={{ width: "100%" }}
    placeholder="Select your birthday"
    format={dateFormat}
  />
</Form.Item>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    there needs to be a pass date as an object

    here is the code:

     useEffect(() => {
    if (currentRecord) {
      const formattedBirthday = dayjs(currentRecord.birthday);
      const updatedRecord = {
        ...currentRecord,
        birthday: formattedBirthday,
      };
      form.setFieldsValue(updatedRecord);
    }
  }, [currentRecord]);

  2. 0

    The problem is that you’re using moment with dayjs. Following docs you should use only dayjs to handle time related values:

    useEffect(() => {
    if (currentRecord) {
      const formattedBirthday = dayjs(currentRecord.birthday)
        .tz("Asia/Dhaka")
        .format("YYYY-MM-DD");

      setCurrentRecord({
        ...currentRecord,
        birthday: formattedBirthday
      });

      form.setFieldsValue({
        birthday: formattedBirthday // removed moment
      });
    }
  }, [currentRecord, setCurrentRecord, form]);


<Form.Item
  label="Birthday"
  name="birthday"
  rules={[
    { required: true, message: "Please select a birthday!" }
  ]}
>
  <DatePicker
    style={{ width: "100%" }}
    placeholder="Select your birthday"
    // you cal also use an array with all formats your field should accept
    // eg.: ['YYYY-MM-DD', 'YY-MM-DD', 'DD-MM-YY']
    format={'YYYY-MM-DD'} 
  />
</Form.Item>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search