TypeError: date.locale bukan fungsi

Question

Saya guna antd "antd": "^5.5.1" DatePicker 来绑定日期字符串，这是 App.tsx Kodnya seperti berikut:

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;

Apabila saya menjalankan halaman mudah ini, ia menunjukkan ralat:

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)

Saya cuba menambah format rentetan DatePicker tetapi masih tidak dapat menyelesaikan masalah. Adakah saya terlepas sesuatu? Apakah yang perlu saya lakukan untuk menjadikannya berfungsi?

Answer 1

date.locale error ant datepicker

Saya rasa Ant Datepicker dalam versi 5 menerima jenis atau rentetan dayjs dan tidak boleh menerima undefined. Pada mulanya nilai borang anda tidak ditentukan. Kemas kini rentetannya kemudian.

Boleh cuba?

Contoh

Apabila anda menetapkan nilai awal:

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

Apabila anda menyerahkan nilai:

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

Semoga ini membantu.

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;