AntD DatePicker如何设置可选日期且未选择时返回null值

你遇到的未选结束日期默认返回今日的问题，通常是两个原因导致：

1. tenancyEndDate变量初始化时默认赋值为当前日期的moment对象
2. 未正确使用Form组件的托管能力，手动维护变量时没有覆盖清空场景的赋值

以下是两种可行的修改方案：

方案1：保留手动维护变量的写法 #

仅需要2处调整即可：

• 声明tenancyEndDate变量时，初始值设为null，不要设置默认的今日moment对象
• DatePicker清空时onChange回调的入参date本身就是null，赋值后提交直接取tenancyEndDate即可

修改后的核心代码：

<Form.Item name="startDate" 
  rules={[{ required: true, message: 'Please select a start date' }]}
>
  <DatePicker 
    disabledDate={function(date) : boolean { 
      return date.isBefore(moment(), 'day');
    }} 
    onChange={function(date){ tenancyStartDate = date; }}
    placeholder="Start Date" 
  />
</Form.Item>

<Form.Item name="endDate">
  <DatePicker 
    placeholder="End Date"
    disabledDate={function(date) : boolean {
      // 要加判空，避免startDate未选时控制台报错
      if (!tenancyStartDate) return false;
      return date.isSameOrBefore(tenancyStartDate, 'day');
    }} 
    onChange={function(date){ tenancyEndDate = date; }}
  />
</Form.Item>

方案2：更推荐的Form托管写法（无需手动维护变量） #

你已经用了Form.Item绑定了name属性，直接用Form自带的表单值托管能力更稳定，天然支持未选时返回null：

• 给Form组件设置initialValues={{ endDate: null }}，明确结束日期初始值为null
• 删掉两个DatePicker的自定义onChange赋值逻辑，Form会自动同步值
• 动态限制结束日期可选范围时，用Form.useWatch获取实时的开始日期值
• 提交时通过Form的提交回调参数或者form.getFieldsValue()拿值，未选endDate时直接返回null

修改后的完整代码：

import { Form, DatePicker } from 'antd';
import moment from 'moment';

const TenancyForm = () => {
  const [form] = Form.useForm();
  // 实时获取开始日期值，用于限制结束日期可选范围
  const tenancyStartDate = Form.useWatch('startDate', form);

  const onFinish = (values) => {
    // values.endDate 未选择时直接返回null，可直接传给后端
    console.log('表单值：', values);
  };

  return (
    <Form
      form={form}
      initialValues={{ endDate: null }}
      onFinish={onFinish}
    >
      <Form.Item 
        name="startDate" 
        rules={[{ required: true, message: 'Please select a start date' }]}
      >
        <DatePicker 
          disabledDate={(date) => date.isBefore(moment(), 'day')}
          placeholder="Start Date" 
        />
      </Form.Item>

      <Form.Item name="endDate">
        <DatePicker 
          placeholder="End Date"
          disabledDate={(date) => {
            if (!tenancyStartDate) return false;
            return date.isSameOrBefore(tenancyStartDate, 'day');
          }}
        />
      </Form.Item>
    </Form>
  )
}

注意：如果你的接口要求空日期不传字段，提交前判断values.endDate === null时删除该字段即可。

内容的提问来源于stack exchange，提问作者Fahed Jomieh