Ant Design TimePicker移除OK按钮失效问题求助

问题原因 #

showOK 是TimePicker内部弹出面板（PickerPanel）的专属属性，直接在TimePicker组件根节点设置不会生效，需要将该属性传递给内部的面板组件。

解决方案1：通过popupRender自定义弹窗（推荐） #

这种方法从组件层面控制按钮显示，通过自定义弹窗渲染逻辑，将showOK={false}传递给内部的PickerPanel：

import { TimePicker } from 'antd';
import { useState } from 'react';

const YourComponent = () => {
  const [selectedTime, setSelectedTime] = useState(null);

  const handlePickTimeChange = (value) => {
    setSelectedTime(value);
  };

  // 你的禁用时间逻辑示例
  const disabledTime = () => {
    return {
      disabledHours: () => [],
      disabledMinutes: () => [],
      disabledSeconds: () => [],
    };
  };

  // 自定义弹窗渲染，传递showOK属性给面板
  const popupRender = (panel) => {
    return <TimePicker.Panel {...panel.props} showOK={false} />;
  };

  return (
    <TimePicker
      onChange={handlePickTimeChange}
      placeholder="Start Time"
      format="HH:mm"
      allowClear={true}
      showNow={false}
      disabledTime={disabledTime}
      style={{ textShadow: '0px 0px black' }}
      popupRender={popupRender}
    />
  );
};

export default YourComponent;

解决方案2：通过CSS强制隐藏（备选） #

如果组件层面的方法因版本差异不生效，可以用CSS直接隐藏OK按钮：

/* 全局样式或组件内联样式 */
.ant-picker-time-panel-footer .ant-btn-primary {
  display: none !important;
}

注意事项 #

• 请确认你的Ant Design版本，上述代码适用于4.x及5.x主流版本。
• 使用CSS方案时，注意样式作用域，避免影响页面中其他TimePicker组件。

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