Maison  >  Questions et réponses  >  le corps du texte

TypeError : date.locale n'est pas une fonction

J'utilise antd "antd": "^5.5.1" DatePicker 来绑定日期字符串,这是 App.tsx Le code est le suivant :

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;

Lorsque j'exécute cette page simple, l'erreur s'affiche : 

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)

J'ai essayé d'ajouter le format de chaîne DatePicker mais je ne parviens toujours pas à résoudre le problème. Ai-je manqué quelque chose? Que dois-je faire pour que cela fonctionne ?

P粉006847750P粉006847750307 Il y a quelques jours650

répondre à tous(1)je répondrai

  • P粉464208937

    P粉4642089372024-01-09 17:08:41

    erreur date.locale et datepicker

    Je pense qu'Ant Datepicker dans la version 5 accepte le type ou la chaîne dayjs et ne peut pas accepter undéfini. Initialement, les valeurs de votre formulaire ne sont pas définies. Mettez à jour sa chaîne plus tard.

    Peux-tu l'essayer ?

    Exemple

    Lorsque vous définissez la valeur initiale :

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

    Lorsque vous soumettez une valeur :

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

    J'espère que cela vous aidera.

    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;

    répondre
    0
  • Annulerrépondre