Antd DatePicker选了日期但输入框没显示内容怎么办？

西门胜楠提问于 2026-02-17 19:34:23 阅读 10

组件

在Ant Design表单里用DatePicker组件，选了日期后输入框还是空的，之前试过设置defaultValue和onChange，但页面就是不显示选中的日期，这是怎么回事？

代码是这样写的：


<Form.Item name="date">
  <DatePicker onChange={(date) => console.log(date)} />
</Form.Item>

控制台能收到日期对象，但输入框始终没有文字显示，是不是需要额外配置value属性？或者和表单的model有关？

我来解答赞 4 收藏

反馈

1 条解答

端木誉馨 Lv1

你这个问题主要是因为 Antd 的 Form 和 DatePicker 组件之间的双向绑定没处理好。Form.Item 包裹的子组件，比如 DatePicker，默认是受控组件，它的值是由 Form 的状态管理的，而不是通过 defaultValue 或者手动设置 value 来控制。

要解决这个问题，你需要确保 Form 的初始值和 DatePicker 的交互逻辑正确。首先，检查一下你的 Form 是否设置了 initialValues，这个属性是用来初始化表单字段的值的。如果没有设置，DatePicker 的输入框可能会显示为空。

另外，onChange 回调虽然能打印出日期对象，但并不会自动更新 Form 的值。Antd 的 Form 会接管子组件的 value 和 onChange，所以你不需要手动处理这些。如果你非要自定义行为，可以通过 Form 的 setFieldsValue 方法来手动更新字段值，但一般情况下不推荐这么做，容易引发状态不一致的问题。

给你一个修复后的代码示例：

import React from 'react';

import { Form, DatePicker } from 'antd';



const MyForm = () => {

  const [form] = Form.useForm();



  return (

    <Form

      form={form}

      initialValues={{ date: null }} // 设置初始值，确保字段有默认状态

    >

      <Form.Item

        name="date"

        label="选择日期"

        rules={[{ required: true, message: '请选择日期' }]} // 做校验，确保用户必须选日期

      >

        <DatePicker />

      </Form.Item>

    </Form>

  );

};



export default MyForm;

注意几点：
1. initialValues 是关键，确保每个表单项都有明确的初始状态。
2. 不要直接给 DatePicker 设置 defaultValue 或 value，Antd 的 Form 会接管这些属性。
3. 如果你要对日期做额外处理，比如格式化，可以用 Form.Item 的 normalize 属性或者在提交时统一处理。

最后提醒一下，做表单开发时一定要注意数据的一致性和校验，尤其是在用户输入或选择的地方，避免因为状态不同步导致奇怪的问题。

2026-02-17 20:01