AntD edatepicker：如何设置可选日期和未选择时为空答案

【问题标题】：AntD edatepicker : How to set optional date and null when not chosenAntD edatepicker：如何设置可选日期和未选择时为空
【发布时间】：2021-11-23 05:38:52
【问题描述】：

我正在尝试做一个应用程序，我的用户可以选择结束日期或将其留空，这应该在未选择结束日期时发送空值，但在未选择日期时返回今天的日期。

              <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 { 
                    return date.isSameOrBefore(tenancyStartDate, 'day');
                  }} 
                  onChange={function(date){ tenancyEndDate = date; }}
                   
                />
              </Form.Item>

如果没有选择结束日期，如何传递 null？

【问题讨论】：

你找到什么有用的了吗？

标签： typescript datepicker antd

【解决方案1】：

不确定您的 tenancyStartDate 和 tenancyEndDate 是如何声明的以及它们默认保存的内容，但这可能会给您带来问题。

当按下“x”以清除字段时，日期选择器确实会发送 null，但如果值没有更改，那么任何默认值都将保留在您的 vars 中。

要解决此问题，我只需使用 useState 就像在 this exmaple 中一样。

顺便说一句，你有什么理由不使用 RangePicker 来代替？

示例代码

function App() {
  const [state, setState] = useState({
    tenancyStartDate: moment(),
    tenancyEndDate: undefined,
  });

  function onChange(momentDate, param) {
    console.log({momentDate, param, state});
    // dynamically set your param in state
    setState({...state, ...{[param]: momentDate}});
  }

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


    <Form.Item name="endDate">
      <DatePicker 
        placeholder="End Date"
        disabledDate={function(date) { 
          return date.isSameOrBefore(state.tenancyStartDate, 'day');
        }} 
        onChange={(value) => onChange(value, 'tenancyEndDate')}
          
      />
    </Form.Item>
  </React.Fragment>
}

【讨论】：