AntD DatePicker清除按钮覆盖日历按钮，如何移至弹窗或实现手动清除？

针对你遇到的清除图标覆盖日历按钮的问题，这里提供几种可行的解决思路：

一、将清除按钮移至日历弹窗（Today按钮旁） #

通过renderExtraFooter属性自定义弹窗底部内容，添加清除按钮，同时隐藏默认的清除按钮：

1. 设置allowClear={false}关闭默认清除按钮
2. 用useRef获取DatePicker实例，实现手动清除逻辑
3. 在renderExtraFooter中添加自定义清除按钮，和Today按钮同区域

代码示例：

import { DatePicker, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { useRef } from 'react';

const CustomDatePicker = () => {
  const datePickerRef = useRef(null);

  const handleClear = () => {
    datePickerRef.current.setValue(null);
    // 可选：清除后关闭弹窗
    datePickerRef.current.hidePicker();
  };

  return (
    <DatePicker
      ref={datePickerRef}
      allowClear={false}
      renderExtraFooter={() => (
        <Button 
          type="text" 
          icon={<CloseOutlined />} 
          onClick={handleClear}
          style={{ marginLeft: 8 }}
        >
          清除
        </Button>
      )}
    />
  );
};

export default CustomDatePicker;

二、调整默认清除按钮位置（快速修复） #

如果只是布局空间不足导致覆盖，直接用CSS修改清除按钮的位置即可，无需改动逻辑：

.ant-picker-clear {
  right: 40px; /* 根据日历按钮宽度调整，避开重叠区域 */
}

三、隐藏默认按钮，自定义外部清除触发 #

如果更倾向于外部触发清除，可以在DatePicker旁添加独立的清除按钮，同样通过ref控制值：

import { DatePicker, Button, Space } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { useRef } from 'react';

const CustomDatePicker = () => {
  const datePickerRef = useRef(null);

  const handleClear = () => {
    datePickerRef.current.setValue(null);
  };

  return (
    <Space>
      <DatePicker ref={datePickerRef} allowClear={false} />
      <Button 
        type="text" 
        icon={<CloseOutlined />} 
        onClick={handleClear}
      >
        清除
      </Button>
    </Space>
  );
};

export default CustomDatePicker;

内容的提问来源于stack exchange，提问作者Shukurullo Odilov