TypeError: date.locale is not a function

Question

I use antd "antd": "^5.5.1" DatePicker to bind the date string, this is App.tsx The code is as follows:

import { DatePicker, Form } from "antd";
import React from "react";
import { useState } from "react";

export interface EduModel {
  admission: String;
}

const App: React.FC = () => {

  const [edu, setEdu] = useState<EduModel>();

  const onFinish = (values: any) => {

  };

  React.useEffect(() => {
    let edu1: EduModel = {
      admission: '1995-09-01'
    };
    setEdu(edu1);
  }, []);

  const onFinishFailed = (errorInfo: any) => {

  };

  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue(edu)
  }, [form, edu]);

  return (
    <div>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        form={form}
      >
        <Form.Item
          label={"admission"}
          name="admission"
          rules={[
            { required: true, message: "please input date" }
          ]}>
          <DatePicker format={"YYYY-MM-DD"}></DatePicker>
        </Form.Item>
      </Form>
    </div>
  );
}

export default App;

When I run this simple page it shows the error:

dayjs.js:185 Uncaught TypeError: date.locale is not a function
    at Object.format (dayjs.js:185:1)
    at formatValue (dateUtil.js:104:1)
    at useValueTexts.js:18:1
    at useMemo (useMemo.js:5:1)
    at useValueTexts (useValueTexts.js:8:1)
    at InnerPicker (Picker.js:150:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at beginWork (react-dom.development.js:27426:1)

I tried adding DatePicker string format but still can't solve the problem. Did I miss something? What should I do to make it work?

Answer 1

date.locale error ant datepicker

I think Ant Datepicker in version 5 accepts dayjs type or string and cannot accept undefined. Initially your form's values ​​are undefined. Update its string later.

Can you try it?

Example

When you set the initial value:

form.setFieldsValue({
 admission: dayjs(edu?.admission)
});

When you submit a value:

const onFinish = (values: any) => {
 console.log({
  ...values,
  admission: dayjs(values?.admission).format("YYYY-MM-DD")
 });
};

hope this helps.

import { DatePicker, Form, Button } from "antd";
import React from "react";
import { useState } from "react";
import dayjs, { Dayjs } from "dayjs";

export interface EduModel {
  admission: String;
}

const App: React.FC = () => {
  const [edu, setEdu] = useState<EduModel>();

  const onFinish = (values: any) => {
    console.log({
      ...values,
      admission: dayjs(values?.admission).format("YYYY-MM-DD")
    });
  };

  React.useEffect(() => {
    let edu1: EduModel = {
      admission: dayjs("1995-09-01").format("YYYY-MM-DD")
    };
    setEdu(edu1);
  }, []);

  const onFinishFailed = (errorInfo: any) => {};

  const [form] = Form.useForm();

  React.useEffect(() => {
    if (edu) {
      form.setFieldsValue({
        admission: dayjs(edu?.admission)
      });
    }
  }, [form, edu]);

  return (
    <div>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        form={form}
      >
        <Form.Item
          label={"admission"}
          name="admission"
          rules={[{ required: true, message: "please input date" }]}
        >
          <DatePicker format={"YYYY-MM-DD"}></DatePicker>
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;