diff --git a/packages/components/date-picker/DatePicker.tsx b/packages/components/date-picker/DatePicker.tsx
index 32b5583ff2..b6aafb6f5d 100644
--- a/packages/components/date-picker/DatePicker.tsx
+++ b/packages/components/date-picker/DatePicker.tsx
@@ -34,6 +34,7 @@ import type {
   DateValue,
   DatePickerYearChangeTrigger,
   DatePickerMonthChangeTrigger,
+  PresetDate,
 } from './type';
 import type { TagInputRemoveContext } from '../tag-input';
 
@@ -368,7 +369,7 @@ export default defineComponent({
     }
 
     // 预设
-    function onPresetClick(presetValue: DateValue | (() => DateValue)) {
+    function onPresetClick(presetValue: DateValue | (() => DateValue), context: { preset: PresetDate; e: MouseEvent }) {
       const presetVal = isFunction(presetValue) ? presetValue() : presetValue;
       onChange?.(
         formatDate(presetVal, {
@@ -385,6 +386,7 @@ export default defineComponent({
         format: formatRef.value.format,
       });
       popupVisible.value = false;
+      props.onPresetClick?.(context);
     }
 
     function onYearChange(nextYear: number) {
@@ -462,7 +464,7 @@ export default defineComponent({
           popupVisible={!isReadOnly.value && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}
-          panel={() => <TSinglePanel {...panelProps.value} v-slots={slots} />}
+          panel={() => <TSinglePanel {...panelProps.value} v-slots={{ presets: slots.presets }} />}
           tagInputProps={{
             onRemove: onTagRemoveClick,
           }}
diff --git a/packages/components/date-picker/DateRangePicker.tsx b/packages/components/date-picker/DateRangePicker.tsx
index 3aa5a19939..f2b04d5d90 100644
--- a/packages/components/date-picker/DateRangePicker.tsx
+++ b/packages/components/date-picker/DateRangePicker.tsx
@@ -553,7 +553,7 @@ export default defineComponent({
           popupProps={popupProps.value}
           rangeInputProps={rangeInputProps.value}
           popupVisible={popupVisible.value}
-          panel={() => <TRangePanel {...panelProps.value} v-slots={slots} />}
+          panel={() => <TRangePanel {...panelProps.value} v-slots={{ presets: slots.presets }} />}
         />
       </div>
     );
diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx
index 43eb7f098c..73b3fb1d51 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-picker.test.tsx
@@ -56,6 +56,102 @@ describe('DatePicker', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  it('DatePicker: the presets slot appears when the pop-up panel is opened', async () => {
+    const presetsSlotId = 'date-picker-presets-slot-content';
+    const attachClass = 'date-picker-presets-slot-attach';
+
+    const wrapper = mount({
+      render() {
+        return (
+          <div class={attachClass}>
+            <DatePicker popupProps={{ attach: `.${attachClass}` }}>
+              {{
+                presets: () => <span data-testid={presetsSlotId}>presets</span>,
+              }}
+            </DatePicker>
+          </div>
+        );
+      },
+    });
+
+    const trigger = wrapper.find('.t-input');
+    await trigger.trigger('mousedown');
+    await trigger.trigger('mouseup');
+    await trigger.trigger('click');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const presetsEl = wrapper.find(`[data-testid="${presetsSlotId}"]`);
+    expect(presetsEl.exists()).toBe(true);
+    expect(presetsEl.text()).toBe('presets');
+  });
+
+  it('DatePicker: clicking the preset button triggers preset-click and passes { preset, e }', async () => {
+    const onPresetClick = vi.fn();
+    const attachClass = 'date-picker-preset-click-attach';
+    const presets = { today: '2020-12-28', yesterday: '2020-12-27' };
+
+    const wrapper = mount({
+      render() {
+        return (
+          <div class={attachClass}>
+            <DatePicker presets={presets} onPresetClick={onPresetClick} popupProps={{ attach: `.${attachClass}` }} />
+          </div>
+        );
+      },
+    });
+
+    const trigger = wrapper.find('.t-input');
+    await trigger.trigger('mousedown');
+    await trigger.trigger('mouseup');
+    await trigger.trigger('click');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const buttons = wrapper.findAll('.t-button');
+    const todayButton = buttons.find((b) => b.text() === 'today');
+    expect(todayButton).toBeTruthy();
+    if (todayButton) await todayButton.trigger('click');
+    await nextTick();
+
+    expect(onPresetClick).toHaveBeenCalledTimes(1);
+    const context = onPresetClick.mock.calls[0][0];
+    expect(context).toHaveProperty('preset');
+    expect(context).toHaveProperty('e');
+    expect(context.preset).toEqual({ today: '2020-12-28' });
+    expect(context.e).toBeInstanceOf(MouseEvent);
+  });
+
+  it('DateRangePicker: the presets slot appears when the pop-up panel is opened', async () => {
+    const presetsSlotId = 'date-range-presets-slot-content';
+    const attachClass = 'date-range-presets-test-attach';
+
+    const wrapper = mount({
+      render() {
+        return (
+          <div class={attachClass}>
+            <DateRangePicker popupProps={{ attach: `.${attachClass}` }}>
+              {{
+                presets: () => <span data-testid={presetsSlotId}>presets</span>,
+              }}
+            </DateRangePicker>
+          </div>
+        );
+      },
+    });
+
+    const trigger = wrapper.find('.t-input');
+    await trigger.trigger('mousedown');
+    await trigger.trigger('mouseup');
+    await trigger.trigger('click');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const presetsEl = wrapper.find(`[data-testid="${presetsSlotId}"]`);
+    expect(presetsEl.exists()).toBe(true);
+    expect(presetsEl.text()).toBe('presets');
+  });
+
   it("DatePicker: :defaultTime[string] & :valueType['time-stamp'] without enableTimePicker", async () => {
     // 测试 DatePicker 当 valueType 为 time-stamp 且提供 defaultTime 但不启用 enableTimePicker 时
     const defaultTime = '10:30:45';
diff --git a/packages/components/date-picker/_example-ts/date-presets-alt.vue b/packages/components/date-picker/_example-ts/date-presets-alt.vue
index d686745cfc..a2e5a7fe61 100644
--- a/packages/components/date-picker/_example-ts/date-presets-alt.vue
+++ b/packages/components/date-picker/_example-ts/date-presets-alt.vue
@@ -1,5 +1,11 @@
 <template>
   <t-space direction="vertical">
+    <t-date-picker v-model="value" :presets="presets1" @preset-click="handlePresetClick" />
+    <t-date-picker v-model="value2" format="YYYY-MM-DD HH:mm:ss" placeholder="快捷选择此刻" enable-time-picker>
+      <template #presets>
+        <t-button size="small" variant="text" @click="value2 = dayjs().toDate()">此刻</t-button>
+      </template>
+    </t-date-picker>
     <t-date-range-picker v-model="range1" :presets="presets" />
     <t-date-range-picker v-model="range2" :presets="presets" enable-time-picker />
   </t-space>
@@ -8,12 +14,25 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs';
 import { ref } from 'vue';
-import { DateRangePickerProps } from 'tdesign-vue-next';
+import { DateRangePickerProps, DatePickerProps } from 'tdesign-vue-next';
+
+const presets1 = ref<DatePickerProps['presets']>({
+  今天: dayjs().toDate(),
+});
 const presets = ref<DateRangePickerProps['presets']>({
   最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
   最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
   今天: [dayjs().toDate(), dayjs().toDate()],
 });
+
+const value = ref('2022-01-01');
+const value2 = ref();
 const range1 = ref(['2022-01-01', '2022-08-08']);
 const range2 = ref(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);
+
+type PresetClickContext = Parameters<NonNullable<DatePickerProps['onPresetClick']>>[0];
+
+const handlePresetClick = (context: PresetClickContext) => {
+  console.log(context);
+};
 </script>
diff --git a/packages/components/date-picker/_example/date-presets-alt.vue b/packages/components/date-picker/_example/date-presets-alt.vue
index 4028030bc9..c90db30df1 100644
--- a/packages/components/date-picker/_example/date-presets-alt.vue
+++ b/packages/components/date-picker/_example/date-presets-alt.vue
@@ -1,5 +1,11 @@
 <template>
   <t-space direction="vertical">
+    <t-date-picker v-model="value" :presets="presets1" @preset-click="handlePresetClick" />
+    <t-date-picker v-model="value2" format="YYYY-MM-DD HH:mm:ss" placeholder="快捷选择此刻" enable-time-picker>
+      <template #presets>
+        <t-button size="small" variant="text" @click="value2 = dayjs().toDate()">此刻</t-button>
+      </template>
+    </t-date-picker>
     <t-date-range-picker v-model="range1" :presets="presets" />
     <t-date-range-picker v-model="range2" :presets="presets" enable-time-picker />
   </t-space>
@@ -9,12 +15,21 @@
 import { ref } from 'vue';
 import dayjs from 'dayjs';
 
+const presets1 = ref({
+  今天: dayjs().toDate(),
+});
 const presets = ref({
   最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
   最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
   今天: [dayjs().toDate(), dayjs().toDate()],
 });
 
+const value = ref('2022-01-01');
+const value2 = ref('');
 const range1 = ref(['2022-01-01', '2022-08-08']);
 const range2 = ref(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);
+
+const handlePresetClick = (context) => {
+  console.log(context);
+};
 </script>
diff --git a/packages/components/date-picker/components/base/Footer.tsx b/packages/components/date-picker/components/base/Footer.tsx
index 8920bcb0b4..99b52e2e8e 100644
--- a/packages/components/date-picker/components/base/Footer.tsx
+++ b/packages/components/date-picker/components/base/Footer.tsx
@@ -6,7 +6,7 @@ import TButton from '../../../button';
 import type { TdDatePickerProps } from '../../type';
 
 export default defineComponent({
-  name: 'TDatePickerTable',
+  name: 'TDatePickerFooter',
   props: {
     enableTimePicker: Boolean,
     presetsPlacement: String,
@@ -25,7 +25,6 @@ export default defineComponent({
     const footerClass = computed(() => [COMPONENT_NAME.value, `${COMPONENT_NAME.value}--${props.presetsPlacement}`]);
 
     const renderPresets = () => {
-      if (!props.presets) return null;
       if (isPlainObject(props.presets))
         return Object.keys(props.presets).map((key: string) => (
           <TButton
@@ -39,22 +38,27 @@ export default defineComponent({
             {key}
           </TButton>
         ));
-      return renderTNodeJSX('presets');
+      const presetsNode = renderTNodeJSX('presets');
+      return presetsNode ?? null;
+    };
+    return () => {
+      const presetsContent = renderPresets();
+      const hasPresetsContent = Array.isArray(presetsContent) ? presetsContent.length > 0 : !!presetsContent;
+      return (
+        <div class={footerClass.value}>
+          {hasPresetsContent ? <div class={presetsClass.value}>{presetsContent}</div> : null}
+          {props.enableTimePicker && props.needConfirm && (
+            <TButton
+              disabled={!props.selectedValue}
+              size="small"
+              theme="primary"
+              onClick={(e: MouseEvent) => props.onConfirmClick?.({ e })}
+            >
+              {t(globalConfig.value.confirm)}
+            </TButton>
+          )}
+        </div>
+      );
     };
-    return () => (
-      <div class={footerClass.value}>
-        {<div class={presetsClass.value}>{renderPresets()}</div>}
-        {props.enableTimePicker && props.needConfirm && (
-          <TButton
-            disabled={!props.selectedValue}
-            size="small"
-            theme="primary"
-            onClick={(e: MouseEvent) => props.onConfirmClick?.({ e })}
-          >
-            {t(globalConfig.value.confirm)}
-          </TButton>
-        )}
-      </div>
-    );
   },
 });
diff --git a/packages/components/date-picker/components/panel/ExtraContent.tsx b/packages/components/date-picker/components/panel/ExtraContent.tsx
index 64b9a21d38..786c4d5492 100644
--- a/packages/components/date-picker/components/panel/ExtraContent.tsx
+++ b/packages/components/date-picker/components/panel/ExtraContent.tsx
@@ -14,9 +14,11 @@ export default defineComponent({
     onConfirmClick: Function,
     selectedValue: [String, Number, Array, Date] as PropType<TdDatePickerProps['value']>,
   },
-  setup(props) {
-    // 默认为 true
-    const showPanelFooter = computed(() => (props.enableTimePicker && props.needConfirm) || props.presets);
+  setup(props, { slots }) {
+    // 有 presets 对象、presets 插槽、或需要确认按钮时显示 footer
+    const showPanelFooter = computed(
+      () => (props.enableTimePicker && props.needConfirm) || props.presets || !!slots.presets,
+    );
 
     return () =>
       showPanelFooter.value ? (
@@ -28,6 +30,7 @@ export default defineComponent({
           presetsPlacement={props.presetsPlacement}
           selectedValue={props.selectedValue}
           needConfirm={props.needConfirm}
+          v-slots={{ presets: slots.presets }}
         />
       ) : null;
   },
diff --git a/packages/components/date-picker/components/panel/RangePanel.tsx b/packages/components/date-picker/components/panel/RangePanel.tsx
index 61dc3c198c..90d786f57f 100644
--- a/packages/components/date-picker/components/panel/RangePanel.tsx
+++ b/packages/components/date-picker/components/panel/RangePanel.tsx
@@ -211,6 +211,7 @@ export default defineComponent({
             onConfirmClick={props.onConfirmClick}
             presetsPlacement={props.presetsPlacement}
             needConfirm={props.needConfirm}
+            v-slots={{ presets: slots.presets }}
           />
         ) : null}
         <div class={`${COMPONENT_NAME.value}-content-wrapper`}>
@@ -264,6 +265,7 @@ export default defineComponent({
             onConfirmClick={props.onConfirmClick}
             presetsPlacement={props.presetsPlacement}
             needConfirm={props.needConfirm}
+            v-slots={{ presets: slots.presets }}
           />
         ) : null}
       </div>
diff --git a/packages/components/date-picker/components/panel/SinglePanel.tsx b/packages/components/date-picker/components/panel/SinglePanel.tsx
index f7f584ab62..b9a93dadb1 100644
--- a/packages/components/date-picker/components/panel/SinglePanel.tsx
+++ b/packages/components/date-picker/components/panel/SinglePanel.tsx
@@ -131,9 +131,13 @@ export default defineComponent({
         ]}
         onClick={(e) => props.onPanelClick?.({ e })}
       >
-        {['top', 'left'].includes(props.presetsPlacement) ? <TExtraContent {...extraProps.value} /> : null}
-        <TPanelContent {...panelContentProps.value} v-slots={slots} />
-        {['bottom', 'right'].includes(props.presetsPlacement) ? <TExtraContent {...extraProps.value} /> : null}
+        {['top', 'left'].includes(props.presetsPlacement) ? (
+          <TExtraContent {...extraProps.value} v-slots={slots.presets ? { presets: slots.presets } : {}} />
+        ) : null}
+        <TPanelContent {...panelContentProps.value} />
+        {['bottom', 'right'].includes(props.presetsPlacement) ? (
+          <TExtraContent {...extraProps.value} v-slots={slots.presets ? { presets: slots.presets } : {}} />
+        ) : null}
       </div>
     );
   },
diff --git a/packages/tdesign-vue-next/.changelog/pr-6490.md b/packages/tdesign-vue-next/.changelog/pr-6490.md
new file mode 100644
index 0000000000..e6e886ebc5
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-6490.md
@@ -0,0 +1,6 @@
+---
+pr_number: 6490
+contributor: ZTH520
+---
+
+- fix(DatePicker): 修复 `presets` 插槽用法无效，`onPresetClick`事件未正确触发的问题 @ZTH520 ([#6490](https://github.com/Tencent/tdesign-vue-next/pull/6490))