From 6c656c85f7a64cc1e4e70e511a9e8efed973cdce Mon Sep 17 00:00:00 2001
From: Tantatorn Suksangwarn <timefear007@gmail.com>
Date: Sun, 30 Jun 2024 22:17:14 +0700
Subject: [PATCH] feat: Add `okButtonProps` to time picker (#49657)

* feat: add `okButtonProps` to pickers' props

* doc: add okButtonProps to date, time picker documentation

* test: add new test case for TimePicker
---
 components/date-picker/PickerButton.tsx       |    8 -
 .../generatePicker/generateRangePicker.tsx    |    5 +-
 .../generatePicker/generateSinglePicker.tsx   |    5 +-
 .../date-picker/generatePicker/interface.ts   |    4 +-
 .../generatePicker/useComponents.ts           |   14 -
 .../generatePicker/useComponents.tsx          |   21 +
 components/date-picker/index.en-US.md         |    1 +
 .../__snapshots__/index.test.tsx.snap         | 1562 +++++++++++++++++
 .../time-picker/__tests__/index.test.tsx      |    7 +
 components/time-picker/index.en-US.md         |    1 +
 10 files changed, 1601 insertions(+), 27 deletions(-)
 delete mode 100644 components/date-picker/PickerButton.tsx
 delete mode 100644 components/date-picker/generatePicker/useComponents.ts
 create mode 100644 components/date-picker/generatePicker/useComponents.tsx

diff --git a/components/date-picker/PickerButton.tsx b/components/date-picker/PickerButton.tsx
deleted file mode 100644
index 97af6420ef..0000000000
--- a/components/date-picker/PickerButton.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import Button from '../button';
-import type { ButtonProps } from '../button';
-
-export default function PickerButton(props: ButtonProps) {
-  return <Button size="small" type="primary" {...props} />;
-}
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 346db2ab26..594ae5cd8b 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -4,8 +4,8 @@ import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
 import classNames from 'classnames';
-import { RangePicker as RCRangePicker } from 'rc-picker';
 import type { PickerRef } from 'rc-picker';
+import { RangePicker as RCRangePicker } from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 
 import ContextIsolator from '../../_util/ContextIsolator';
@@ -49,6 +49,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
       status: customStatus,
       rootClassName,
       variant: customVariant,
+      okButtonProps,
       ...restProps
     } = props;
 
@@ -77,7 +78,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
     const [mergedAllowClear] = useIcons(props, prefixCls);
 
     // ================== components ==================
-    const mergedComponents = useComponents(components);
+    const mergedComponents = useComponents(components, okButtonProps);
 
     // ===================== Size =====================
     const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index e710585aae..83417a6923 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -3,8 +3,8 @@ import { forwardRef, useContext, useImperativeHandle } from 'react';
 import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import classNames from 'classnames';
-import RCPicker from 'rc-picker';
 import type { PickerRef } from 'rc-picker';
+import RCPicker from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import type { PickerMode } from 'rc-picker/lib/interface';
 
@@ -56,6 +56,7 @@ export default function generatePicker<DateType extends AnyObject>(
         status: customStatus,
         variant: customVariant,
         onCalendarChange,
+        okButtonProps,
         ...restProps
       } = props;
 
@@ -119,7 +120,7 @@ export default function generatePicker<DateType extends AnyObject>(
       const [mergedAllowClear, removeIcon] = useIcons(props, prefixCls);
 
       // ================== components ==================
-      const mergedComponents = useComponents(components);
+      const mergedComponents = useComponents(components, okButtonProps);
 
       // ===================== Size =====================
       const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
diff --git a/components/date-picker/generatePicker/interface.ts b/components/date-picker/generatePicker/interface.ts
index 6830b1adf0..07f2aa15a6 100644
--- a/components/date-picker/generatePicker/interface.ts
+++ b/components/date-picker/generatePicker/interface.ts
@@ -1,6 +1,6 @@
 import type {
-  PickerRef,
   PickerProps as RcPickerProps,
+  PickerRef,
   RangePickerProps as RcRangePickerProps,
 } from 'rc-picker';
 import type { Locale as RcPickerLocale } from 'rc-picker/lib/interface';
@@ -10,6 +10,7 @@ import type { AnyObject } from '../../_util/type';
 import type { SizeType } from '../../config-provider/SizeContext';
 import type { Variant } from '../../config-provider';
 import type { TimePickerLocale } from '../../time-picker';
+import type { ButtonProps } from '../../button/button';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 
@@ -61,6 +62,7 @@ type InjectDefaultProps<Props> = Omit<Props, 'locale' | 'generateConfig' | 'hide
   popupClassName?: string;
   rootClassName?: string;
   popupStyle?: React.CSSProperties;
+  okButtonProps?: ButtonProps;
 };
 
 /** Base Single Picker props */
diff --git a/components/date-picker/generatePicker/useComponents.ts b/components/date-picker/generatePicker/useComponents.ts
deleted file mode 100644
index 906902b347..0000000000
--- a/components/date-picker/generatePicker/useComponents.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import type { Components } from 'rc-picker/lib/interface';
-
-import PickerButton from '../PickerButton';
-
-export default function useComponents(components?: Components) {
-  return useMemo(
-    () => ({
-      button: PickerButton,
-      ...components,
-    }),
-    [components],
-  );
-}
diff --git a/components/date-picker/generatePicker/useComponents.tsx b/components/date-picker/generatePicker/useComponents.tsx
new file mode 100644
index 0000000000..9016496f4e
--- /dev/null
+++ b/components/date-picker/generatePicker/useComponents.tsx
@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import type { Components } from 'rc-picker/lib/interface';
+
+import type { ButtonProps } from '../../button/button';
+import Button from '../../button/button';
+
+export default function useComponents(components?: Components, buttonProps?: ButtonProps) {
+  function PickerButton(props: ButtonProps) {
+    const mergedProps = { size: 'small', type: 'primary', ...buttonProps, ...props } as ButtonProps;
+
+    return <Button {...mergedProps} />;
+  }
+
+  return useMemo(
+    () => ({
+      button: PickerButton,
+      ...components,
+    }),
+    [components],
+  );
+}
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 58414846e9..78442adafb 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -154,6 +154,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 | onOk | Callback when click ok button | function() | - |  |
+| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - |  |
 | onPanelChange | Callback function for panel changing | function(value, mode) | - |  |
 
 ### DatePicker\[picker=year]
diff --git a/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
index 82085e47eb..d6e3bed429 100644
--- a/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
@@ -1674,6 +1674,1568 @@ exports[`TimePicker rtl render component should be rendered correctly in RTL dir
 </div>
 `;
 
+exports[`TimePicker should modify the ok button 1`] = `
+Array [
+  <div
+    class="ant-picker ant-picker-outlined"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        aria-invalid="false"
+        autocomplete="off"
+        placeholder="Select time"
+        size="10"
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>,
+  <div
+    class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div
+      class="ant-picker-panel-container ant-picker-time-panel-container"
+      style="margin-left: 0px; margin-right: auto;"
+      tabindex="-1"
+    >
+      <div
+        class="ant-picker-panel-layout"
+      >
+        <div>
+          <div
+            class="ant-picker-panel"
+            tabindex="0"
+          >
+            <div
+              class="ant-picker-time-panel"
+            >
+              <div
+                class="ant-picker-content"
+              >
+                <ul
+                  class="ant-picker-time-panel-column"
+                  data-type="hour"
+                >
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="0"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      00
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="1"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      01
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="2"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      02
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="3"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      03
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="4"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      04
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="5"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      05
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="6"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      06
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="7"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      07
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="8"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      08
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="9"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      09
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="10"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      10
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="11"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      11
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="12"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      12
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="13"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      13
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="14"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      14
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="15"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      15
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="16"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      16
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="17"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      17
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="18"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      18
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="19"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      19
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="20"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      20
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="21"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      21
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="22"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      22
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="23"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      23
+                    </div>
+                  </li>
+                </ul>
+                <ul
+                  class="ant-picker-time-panel-column"
+                  data-type="minute"
+                >
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="0"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      00
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="1"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      01
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="2"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      02
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="3"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      03
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="4"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      04
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="5"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      05
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="6"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      06
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="7"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      07
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="8"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      08
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="9"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      09
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="10"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      10
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="11"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      11
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="12"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      12
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="13"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      13
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="14"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      14
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="15"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      15
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="16"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      16
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="17"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      17
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="18"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      18
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="19"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      19
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="20"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      20
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="21"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      21
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="22"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      22
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="23"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      23
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="24"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      24
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="25"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      25
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="26"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      26
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="27"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      27
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="28"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      28
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="29"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      29
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="30"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      30
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="31"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      31
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="32"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      32
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="33"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      33
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="34"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      34
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="35"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      35
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="36"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      36
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="37"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      37
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="38"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      38
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="39"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      39
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="40"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      40
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="41"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      41
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="42"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      42
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="43"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      43
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="44"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      44
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="45"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      45
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="46"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      46
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="47"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      47
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="48"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      48
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="49"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      49
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="50"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      50
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="51"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      51
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="52"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      52
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="53"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      53
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="54"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      54
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="55"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      55
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="56"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      56
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="57"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      57
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="58"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      58
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="59"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      59
+                    </div>
+                  </li>
+                </ul>
+                <ul
+                  class="ant-picker-time-panel-column"
+                  data-type="second"
+                >
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="0"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      00
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="1"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      01
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="2"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      02
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="3"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      03
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="4"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      04
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="5"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      05
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="6"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      06
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="7"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      07
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="8"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      08
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="9"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      09
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="10"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      10
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="11"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      11
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="12"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      12
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="13"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      13
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="14"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      14
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="15"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      15
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="16"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      16
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="17"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      17
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="18"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      18
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="19"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      19
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="20"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      20
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="21"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      21
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="22"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      22
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="23"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      23
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="24"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      24
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="25"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      25
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="26"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      26
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="27"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      27
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="28"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      28
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="29"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      29
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="30"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      30
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="31"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      31
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="32"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      32
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="33"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      33
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="34"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      34
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="35"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      35
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="36"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      36
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="37"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      37
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="38"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      38
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="39"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      39
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="40"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      40
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="41"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      41
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="42"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      42
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="43"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      43
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="44"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      44
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="45"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      45
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="46"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      46
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="47"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      47
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="48"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      48
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="49"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      49
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="50"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      50
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="51"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      51
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="52"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      52
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="53"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      53
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="54"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      54
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="55"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      55
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="56"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      56
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="57"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      57
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="58"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      58
+                    </div>
+                  </li>
+                  <li
+                    class="ant-picker-time-panel-cell"
+                    data-value="59"
+                  >
+                    <div
+                      class="ant-picker-time-panel-cell-inner"
+                    >
+                      59
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-picker-footer"
+          >
+            <ul
+              class="ant-picker-ranges"
+            >
+              <li
+                class="ant-picker-now"
+              >
+                <a
+                  aria-disabled="false"
+                  class="ant-picker-now-btn"
+                >
+                  Now
+                </a>
+              </li>
+              <li
+                class="ant-picker-ok"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm test-ok-button"
+                  disabled=""
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`TimePicker should support bordered 1`] = `
 <div
   class="ant-picker ant-picker-borderless custom-class"
diff --git a/components/time-picker/__tests__/index.test.tsx b/components/time-picker/__tests__/index.test.tsx
index d95c926b2f..1fb0b2f811 100644
--- a/components/time-picker/__tests__/index.test.tsx
+++ b/components/time-picker/__tests__/index.test.tsx
@@ -99,4 +99,11 @@ describe('TimePicker', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should modify the ok button', () => {
+    const { container } = render(
+      <TimePicker open okButtonProps={{ className: 'test-ok-button' }} />,
+    );
+    expect(Array.from(container.children)).toMatchSnapshot();
+  });
 });
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index b799c9d67a..8f3ce4a195 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -82,6 +82,7 @@ dayjs.extend(customParseFormat)
 | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
+| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - |  |
 
 #### DisabledTime