diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
index ab7e3094f9..e9444411e5 100644
--- a/components/_util/__tests__/useZIndex.test.tsx
+++ b/components/_util/__tests__/useZIndex.test.tsx
@@ -207,7 +207,7 @@ describe('Test useZIndex hooks', () => {
   });
   const containers = Object.keys(containerComponent);
   // const containers = ['Modal'];
-  const consumers = ['Dropdown', 'SelectLike', 'ColorPicker'];
+  const consumers = ['Dropdown', 'SelectLike', 'ColorPicker', 'DatePicker'];
   // const consumers = Object.keys(consumerComponent);
 
   containers.forEach((containerKey) => {
@@ -238,7 +238,7 @@ describe('Test useZIndex hooks', () => {
               consumerBaseZIndexOffset[key as ZIndexConsumer],
           );
         });
-        // 先暂时不测试，等所有的消费组件功能都合并过去后再统一测试
+
         it('Test Component', async () => {
           const Container = containerComponent[containerKey as ZIndexContainer];
           const Consumer = consumerComponent[key as ZIndexConsumer];
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 7eb6c49a81..eaa7cd1bde 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -27,6 +27,7 @@ import {
 } from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
+import { useZIndex } from '../../_util/hooks/useZIndex';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type InternalRangePickerProps = RangePickerProps<DateType> & {};
@@ -110,6 +111,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
 
     const locale = { ...contextLocale, ...props.locale! };
 
+    // ============================ zIndex ============================
+    const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
+
     return wrapSSR(
       <RCRangePicker<DateType>
         separator={
@@ -147,6 +151,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         components={Components}
         direction={direction}
         dropdownClassName={classNames(hashId, popupClassName || dropdownClassName, rootClassName)}
+        popupStyle={{
+          ...props.popupStyle,
+          zIndex,
+        }}
         allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
       />,
     );
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 5039f2733f..c79979b2b5 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -28,6 +28,7 @@ import {
 } from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
+import { useZIndex } from '../../_util/hooks/useZIndex';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type CustomPickerProps = {
@@ -138,6 +139,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const [contextLocale] = useLocale('DatePicker', enUS);
 
         const locale = { ...contextLocale, ...props.locale! };
+        // ============================ zIndex ============================
+        const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
 
         return wrapSSR(
           <RCPicker<DateType>
@@ -182,6 +185,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               rootClassName,
               popupClassName || dropdownClassName,
             )}
+            popupStyle={{
+              ...props.popupStyle,
+              zIndex,
+            }}
             allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
           />,
         );
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 2bcc1cc018..c01bd5256e 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1635,7 +1635,7 @@ Array [
                             </div>
                             <div
                               class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
                             >
                               <div
                                 class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5186ae419a..e7bb3d3166 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
               </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;"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
               >
                 <div
                   class="ant-picker-panel-container"