TypeError: date.locale bukan fungsi
P粉006847750
P粉006847750 2024-01-08 20:53:22
0
1
716

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?

P粉006847750
P粉006847750

membalas semua(1)
P粉464208937
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;
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan