AntD DatePicker自定义：新增按钮移至确认栏或修改Now功能

我需要进一步自定义AntD日期时间选择器，需求如下：

• 添加一个按钮，让用户可以跳转到已有的请求日期，仅需输入时间，但不满意renderExtraFooter生成的额外页脚样式，想把该按钮移至确认按钮所在的同一页脚
• 或者修改「Now」功能，使其跳转到指定日期而非今日，目前已修改了文字，但不确定这是否为最优方案
• 了解到AntD日期选择器有panelRender属性，但找不到使用示例，难以实现需求

当前代码如下：

<Form.Item name="requestDateTime">
    <DatePicker format="YYYY-MM-DD h:mm A"
        locale={{
            ...locale,
            lang: {
                ...locale.lang,
                 now: "Request Date"
            }
        }}        
        renderExtraFooter={() => 
            <Button onClick={()=> { 
                form.setFieldsValue({["requestDateTime"]: moment(initialRequestDate)})}
            }> Request Date</Button>
        }
        showTime={{ defaultValue: moment('00:00:00', 'h:mm A') }}>
    </DatePicker>
</Form.Item>

方案一：复用「Now」按钮修改跳转逻辑 #

这是最简洁的方案，直接复用原生「Now」按钮，修改其文字和点击逻辑即可，无需额外添加按钮：

<Form.Item name="requestDateTime">
  <DatePicker
    format="YYYY-MM-DD h:mm A"
    locale={{
      ...locale,
      lang: {
        ...locale.lang,
        now: "Request Date"
      }
    }}
    // 覆盖原生Now按钮的点击逻辑
    onNow={() => {
      form.setFieldsValue({
        requestDateTime: moment(initialRequestDate)
      });
      // 可选：设置后关闭面板，需通过ref获取DatePicker实例
      // datePickerRef.current?.close();
    }}
    showTime={{ defaultValue: moment('00:00:00', 'h:mm A') }}
    // 若要关闭面板，添加ref
    // ref={datePickerRef}
  />
</Form.Item>

方案二：用panelRender自定义面板，将按钮移至确认页脚 #

如果一定要把按钮和确认按钮放在同一页脚，可以通过panelRender完全自定义面板结构，保留原生功能的同时调整页脚布局：

import { DatePicker, Button, Space } from 'antd';
import moment from 'moment';

// 自定义面板渲染函数
const customPanelRender = (panelProps) => {
  const { prefixCls, locale, onOk, onClose, ...restProps } = panelProps;
  
  return (
    <div className={`${prefixCls}-panel`}>
      {/* 保留原生日期选择面板的核心内容 */}
      <DatePicker.Panel {...restProps} />
      {/* 自定义页脚：将自定义按钮与确认按钮并排 */}
      <div className={`${prefixCls}-footer`}>
        <Space>
          <Button
            size="small"
            onClick={() => {
              form.setFieldsValue({
                requestDateTime: moment(initialRequestDate)
              });
            }}
          >
            Request Date
          </Button>
          <Button size="small" type="primary" onClick={onOk}>
            {locale.ok}
          </Button>
        </Space>
      </div>
    </div>
  );
};

// 组件中使用
<Form.Item name="requestDateTime">
  <DatePicker
    format="YYYY-MM-DD h:mm A"
    locale={locale}
    showTime={{ defaultValue: moment('00:00:00', 'h:mm A') }}
    panelRender={customPanelRender}
  />
</Form.Item>

注意点 #

• 使用panelRender时，务必保留原生DatePicker.Panel的传入属性，避免破坏日期选择、时间选择的基础交互
• 若需要设置日期后自动关闭面板，可通过onClose方法或DatePicker的ref调用close()

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