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 ;
-}
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(
status: customStatus,
rootClassName,
variant: customVariant,
+ okButtonProps,
...restProps
} = props;
@@ -77,7 +78,7 @@ export default function generateRangePicker(
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(
status: customStatus,
variant: customVariant,
onCalendarChange,
+ okButtonProps,
...restProps
} = props;
@@ -119,7 +120,7 @@ export default function generatePicker(
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 = Omit ({
- 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 ;
+ }
+
+ 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
`;
+exports[`TimePicker should modify the ok button 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+ 00
+
+
+
+
+ 01
+
+
+
+
+ 02
+
+
+
+
+ 03
+
+
+
+
+ 04
+
+
+
+
+ 05
+
+
+
+
+ 06
+
+
+
+
+ 07
+
+
+
+
+ 08
+
+
+
+
+ 09
+
+
+
+
+ 10
+
+
+
+
+ 11
+
+
+
+
+ 12
+
+
+
+
+ 13
+
+
+
+
+ 14
+
+
+
+
+ 15
+
+
+
+
+ 16
+
+
+
+
+ 17
+
+
+
+
+ 18
+
+
+
+
+ 19
+
+
+
+
+ 20
+
+
+
+
+ 21
+
+
+
+
+ 22
+
+
+
+
+ 23
+
+
+
+
+
+
+ 00
+
+
+
+
+ 01
+
+
+
+
+ 02
+
+
+
+
+ 03
+
+
+
+
+ 04
+
+
+
+
+ 05
+
+
+
+
+ 06
+
+
+
+
+ 07
+
+
+
+
+ 08
+
+
+
+
+ 09
+
+
+
+
+ 10
+
+
+
+
+ 11
+
+
+
+
+ 12
+
+
+
+
+ 13
+
+
+
+
+ 14
+
+
+
+
+ 15
+
+
+
+
+ 16
+
+
+
+
+ 17
+
+
+
+
+ 18
+
+
+
+
+ 19
+
+
+
+
+ 20
+
+
+
+
+ 21
+
+
+
+
+ 22
+
+
+
+
+ 23
+
+
+
+
+ 24
+
+
+
+
+ 25
+
+
+
+
+ 26
+
+
+
+
+ 27
+
+
+
+
+ 28
+
+
+
+
+ 29
+
+
+
+
+ 30
+
+
+
+
+ 31
+
+
+
+
+ 32
+
+
+
+
+ 33
+
+
+
+
+ 34
+
+
+
+
+ 35
+
+
+
+
+ 36
+
+
+
+
+ 37
+
+
+
+
+ 38
+
+
+
+
+ 39
+
+
+
+
+ 40
+
+
+
+
+ 41
+
+
+
+
+ 42
+
+
+
+
+ 43
+
+
+
+
+ 44
+
+
+
+
+ 45
+
+
+
+
+ 46
+
+
+
+
+ 47
+
+
+
+
+ 48
+
+
+
+
+ 49
+
+
+
+
+ 50
+
+
+
+
+ 51
+
+
+
+
+ 52
+
+
+
+
+ 53
+
+
+
+
+ 54
+
+
+
+
+ 55
+
+
+
+
+ 56
+
+
+
+
+ 57
+
+
+
+
+ 58
+
+
+
+
+ 59
+
+
+
+
+
+
+ 00
+
+
+
+
+ 01
+
+
+
+
+ 02
+
+
+
+
+ 03
+
+
+
+
+ 04
+
+
+
+
+ 05
+
+
+
+
+ 06
+
+
+
+
+ 07
+
+
+
+
+ 08
+
+
+
+
+ 09
+
+
+
+
+ 10
+
+
+
+
+ 11
+
+
+
+
+ 12
+
+
+
+
+ 13
+
+
+
+
+ 14
+
+
+
+
+ 15
+
+
+
+
+ 16
+
+
+
+
+ 17
+
+
+
+
+ 18
+
+
+
+
+ 19
+
+
+
+
+ 20
+
+
+
+
+ 21
+
+
+
+
+ 22
+
+
+
+
+ 23
+
+
+
+
+ 24
+
+
+
+
+ 25
+
+
+
+
+ 26
+
+
+
+
+ 27
+
+
+
+
+ 28
+
+
+
+
+ 29
+
+
+
+
+ 30
+
+
+
+
+ 31
+
+
+
+
+ 32
+
+
+
+
+ 33
+
+
+
+
+ 34
+
+
+
+
+ 35
+
+
+
+
+ 36
+
+
+
+
+ 37
+
+
+
+
+ 38
+
+
+
+
+ 39
+
+
+
+
+ 40
+
+
+
+
+ 41
+
+
+
+
+ 42
+
+
+
+
+ 43
+
+
+
+
+ 44
+
+
+
+
+ 45
+
+
+
+
+ 46
+
+
+
+
+ 47
+
+
+
+
+ 48
+
+
+
+
+ 49
+
+
+
+
+ 50
+
+
+
+
+ 51
+
+
+
+
+ 52
+
+
+
+
+ 53
+
+
+
+
+ 54
+
+
+
+
+ 55
+
+
+
+
+ 56
+
+
+
+
+ 57
+
+
+
+
+ 58
+
+
+
+
+ 59
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
exports[`TimePicker should support bordered 1`] = `
{
);
expect(container.firstChild).toMatchSnapshot();
});
+
+ it('should modify the ok button', () => {
+ const { container } = render(
+ ,
+ );
+ 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