在 AntD 的 DatePicker 中更改日历日期清除图标的正确方法

Question

我想从 ant design 框架更改日期选择器的清晰图标。是否可以 ？

原因 - 我想在点击时将日期重置为今天。所以关闭图标是不合适的。

Answer 1

由于 antd 使用rc-picker创建 DatePicker 组件，您可以使用clearIcon属性来自定义清除图标，但由于您需要通过单击清除将 datePicker 的值重置为今天，因此您需要做更多的工作来处理此需求，这里是一个示例：

function PickerWithCustomClear() {
  const [date, setDate] = React.useState(null);
  const [shoudlReset, setShouldReset] = React.useState(false);

  const onChange = (date) => {
    setDate(date);
    if (!date && shoudlReset) {
      setDate(moment());
      setShouldReset(false);
    }
  };

  return (
      <DatePicker
        onChange={onChange}
        allowClear={true}
        value={date}
        clearIcon={
          // you can use every element here
          <SyncOutlined onMouseDown={(e) => setShouldReset(true)} />
        }
      />
  );
}

我已经实现了一个示例，您可以在此处找到它。