我使用 antd "antd": "^5.5.1" DatePicker 来绑定日期字符串，这是 App.tsx 代码如下：
1
1031import { 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;
当我运行这个简单的页面时，显示错误：
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$1 (react-dom.development.js:27426:1)
我尝试添加 DatePicker 字符串格式，但仍然无法解决此问题。我错过了什么吗？我应该怎么做才能让它发挥作用？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
date.locale 错误 ant datepicker
我认为 Ant Datepicker 在版本 5 中接受 dayjs 类型或字符串，不能接受 undefined。最初您的表单的值是未定义的。稍后更新它的字符串。
你能尝试一下吗？
示例
当您设置初始值时：
form.setFieldsValue({ admission: dayjs(edu?.admission) });当您提交值时：
const onFinish = (values: any) => { console.log({ ...values, admission: dayjs(values?.admission).format("YYYY-MM-DD") }); };希望能帮到你。
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;