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

Question

我想从ant design framework中更改日期选择器的清除图标。可能吗？

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

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)} />
        }
      />
  );
}

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

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

Proper way to change calendar date clear icon in DatePicker for AntD

datepicker

reactjs

antd