feat: 增加双击自动填充数据，以及自动设置是否全天的功能

components/date-picker/demo/auto-fill-whole-day.vue

@@ -0,0 +1,123 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 自动填充和整天模式
+  en-US: Auto Fill and Whole Day Mode
+---
+
+## zh-CN
+
+RangePicker 支持两个新功能：
+1. `autoFill`：双击日期时自动设置为开始和结束日期
+2. `isWholeDay`：在 showTime 模式下，自动设置开始时间为 00:00:00，结束时间为 23:59:59
+
+## en-US
+
+RangePicker supports two new features:
+1. `autoFill`: Double-click a date to automatically set it as both start and end date
+2. `isWholeDay`: In showTime mode, automatically set start time to 00:00:00 and end time to 23:59:59
+
+</docs>
+
+<template>
+  <a-space direction="vertical" :size="12">
+    <div>
+      <h4>Auto Fill 功能</h4>
+      <p>双击日期会自动设置为开始和结束日期</p>
+      <a-range-picker :auto-fill="true" @change="onAutoFillChange" />
+    </div>
+
+    <div>
+      <h4>Whole Day 功能</h4>
+      <p>在 showTime 模式下，自动设置整天时间</p>
+      <a-range-picker
+        show-time
+        :is-whole-day="true"
+        format="YYYY/MM/DD HH:mm:ss"
+        @change="onWholeDayChange"
+      />
+    </div>
+
+    <div>
+      <h4>组合使用</h4>
+      <p>同时启用 autoFill 和 isWholeDay</p>
+      <a-range-picker
+        show-time
+        :auto-fill="true"
+        :is-whole-day="true"
+        format="YYYY/MM/DD HH:mm:ss"
+        @change="onCombinedChange"
+      />
+    </div>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import { Dayjs } from 'dayjs';
+
+type RangeValue = [Dayjs, Dayjs];
+
+const onAutoFillChange = (
+  values: RangeValue,
+  dateStrings: [string, string],
+  currentPreset?: any,
+) => {
+  if (values) {
+    console.log(
+      'Auto Fill - From: ',
+      values[0].format('YYYY-MM-DD'),
+      ', to: ',
+      values[1].format('YYYY-MM-DD'),
+    );
+    console.log('Auto Fill - From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    if (currentPreset) {
+      console.log('Auto Fill - Selected preset: ', currentPreset.label);
+    }
+  } else {
+    console.log('Auto Fill - Clear');
+  }
+};
+
+const onWholeDayChange = (
+  values: RangeValue,
+  dateStrings: [string, string],
+  currentPreset?: any,
+) => {
+  if (values && values[0] && values[1]) {
+    console.log(
+      'Whole Day - From: ',
+      values[0].format('YYYY-MM-DD HH:mm:ss'),
+      ', to: ',
+      values[1].format('YYYY-MM-DD HH:mm:ss'),
+    );
+    console.log('Whole Day - From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    if (currentPreset) {
+      console.log('Whole Day - Selected preset: ', currentPreset.label);
+    }
+  } else {
+    console.log('Whole Day - Clear');
+  }
+};
+
+const onCombinedChange = (
+  values: RangeValue,
+  dateStrings: [string, string],
+  currentPreset?: any,
+) => {
+  if (values && values[0] && values[1]) {
+    console.log(
+      'Combined - From: ',
+      values[0].format('YYYY-MM-DD HH:mm:ss'),
+      ', to: ',
+      values[1].format('YYYY-MM-DD HH:mm:ss'),
+    );
+    console.log('Combined - From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    if (currentPreset) {
+      console.log('Combined - Selected preset: ', currentPreset.label);
+    }
+  } else {
+    console.log('Combined - Clear');
+  }
+};
+</script>

components/date-picker/demo/index.vue

@@ -17,6 +17,8 @@
     <Suffix />
     <statusVue />
     <placementVue />
+    <AutoFillWholeDay />
+    <PresetAutofill />
   </demo-sort>
 </template>
 <script>
@@ -36,6 +38,8 @@ import Suffix from './suffix.vue';
 import Bordered from './bordered.vue';
 import RangePicker from './range-picker.vue';
 import placementVue from './placement.vue';
+import AutoFillWholeDay from './auto-fill-whole-day.vue';
+import PresetAutofill from './preset-autofill.vue';
 import statusVue from './status.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -62,6 +66,8 @@ export default defineComponent({
     SelectInRnage,
     Bordered,
     RangePicker,
+    AutoFillWholeDay,
+    PresetAutofill,
   },
 });
 </script>

components/date-picker/demo/preset-autofill.vue

@@ -0,0 +1,154 @@
+<docs>
+---
+order: 8
+title:
+  zh-CN: Preset自动回填
+  en-US: Preset Auto Fill
+---
+
+## zh-CN
+
+RangePicker 现在支持preset自动回填功能。当传入的value包含preset信息时，会根据preset自动计算对应的日期范围。
+
+## en-US
+
+RangePicker now supports preset auto fill functionality. When the passed value contains preset information, it will automatically calculate the corresponding date range based on the preset.
+
+</docs>
+
+<template>
+  <a-space direction="vertical" :size="12">
+    <div>
+      <h4>Preset自动回填功能</h4>
+      <p>当传入的value包含preset信息时，会根据preset自动计算日期范围</p>
+      <p>
+        <strong>当前设置：</strong>
+        is-whole-day={{ isWholeDay }}，show-time=true
+      </p>
+      <p>
+        <strong>行为：</strong>
+        当isWholeDay为false时，点击preset时，会使用当前时间的时分秒，而不是00:00:00 - 23:59:59
+      </p>
+      <a-range-picker
+        v-model:value="rangeValue"
+        show-time
+        :is-whole-day="isWholeDay"
+        format="YYYY/MM/DD HH:mm:ss"
+        :presets="rangePresets"
+        @change="onRangeChange"
+      />
+    </div>
+
+    <div>
+      <h4>切换is-whole-day</h4>
+      <p>
+        <a-button @click="toggleIsWholeDay">切换is-whole-day</a-button>
+      </p>
+      <h4>测试按钮</h4>
+      <a-space>
+        <a-button @click="setTodayPreset">设置为今天preset</a-button>
+        <a-button @click="setLast7DaysPreset">设置为最近7天preset</a-button>
+        <a-button @click="setLast30DaysPreset">设置为最近30天preset</a-button>
+        <a-button @click="setCurrentTimePreset">设置为当前时间preset</a-button>
+        <a-button @click="clearValue">清空值</a-button>
+      </a-space>
+    </div>
+
+    <div>
+      <h4>当前值</h4>
+      <pre>{{ JSON.stringify(rangeValue, null, 2) }}</pre>
+    </div>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import dayjs, { Dayjs } from 'dayjs';
+import { ref } from 'vue';
+
+type RangeValue = [Dayjs, Dayjs] | [Dayjs, Dayjs, any];
+
+const isWholeDay = ref(false);
+
+const rangeValue = ref<RangeValue | null>(null);
+
+const onRangeChange = (values: RangeValue, dateStrings: [string, string], currentPreset?: any) => {
+  if (values) {
+    console.log('From: ', values[0], ', to: ', values[1]);
+    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    if (currentPreset) {
+      console.log('Selected preset key: ', currentPreset.key);
+      console.log('Selected preset label: ', currentPreset.label);
+    } else {
+      console.log('Manual selection (no preset)');
+    }
+  } else {
+    console.log('Clear');
+  }
+};
+
+const rangePresets = ref([
+  {
+    label: '今天',
+    value: [dayjs().startOf('day'), dayjs().endOf('day')],
+    key: 'today',
+  },
+  {
+    label: '最近7天',
+    value: [dayjs().subtract(7, 'day').startOf('day'), dayjs().endOf('day')],
+    key: 'last7days',
+  },
+  {
+    label: '最近30天',
+    value: [dayjs().subtract(30, 'day').startOf('day'), dayjs().endOf('day')],
+    key: 'last30days',
+  },
+  {
+    label: '最近90天',
+    value: [dayjs().subtract(90, 'day').startOf('day'), dayjs().endOf('day')],
+    key: 'last90days',
+  },
+]);
+
+const setTodayPreset = () => {
+  const todayPreset = rangePresets.value.find(p => p.key === 'today');
+  if (todayPreset) {
+    // 传入包含preset信息的value，RangePicker会自动根据preset计算日期范围
+    rangeValue.value = [dayjs(), dayjs(), todayPreset] as any;
+  }
+};
+
+const setLast7DaysPreset = () => {
+  const last7DaysPreset = rangePresets.value.find(p => p.key === 'last7days');
+  if (last7DaysPreset) {
+    // 传入包含preset信息的value，RangePicker会自动根据preset计算日期范围
+    rangeValue.value = [dayjs(), dayjs(), last7DaysPreset] as any;
+  }
+};
+
+const setLast30DaysPreset = () => {
+  const last30DaysPreset = rangePresets.value.find(p => p.key === 'last30days');
+  if (last30DaysPreset) {
+    // 传入包含preset信息的value，RangePicker会自动根据preset计算日期范围
+    rangeValue.value = [dayjs(), dayjs(), last30DaysPreset] as any;
+  }
+};
+
+const setCurrentTimePreset = () => {
+  // 创建一个包含当前时间的preset
+  const currentTimePreset = {
+    label: '当前时间',
+    value: [dayjs(), dayjs()], // 使用当前时间，不设置startOf/endOf
+    key: 'currentTime',
+  };
+  // 传入包含preset信息的value，RangePicker会自动根据preset计算日期范围
+  rangeValue.value = [dayjs(), dayjs(), currentTimePreset] as any;
+};
+
+const clearValue = () => {
+  rangeValue.value = null;
+};
+
+const toggleIsWholeDay = () => {
+  isWholeDay.value = !isWholeDay.value;
+};
+</script>

components/date-picker/demo/presetted-ranges.vue

@@ -40,25 +40,31 @@ const onChange = (date: Dayjs) => {
     console.log('Clear');
   }
 };
-const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
-  if (dates) {
-    console.log('From: ', dates[0], ', to: ', dates[1]);
+const onRangeChange = (values: RangeValue, dateStrings: [string, string], currentPreset?: any) => {
+  if (values) {
+    console.log('From: ', values[0], ', to: ', values[1]);
     console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    if (currentPreset) {
+      console.log('Selected preset key: ', currentPreset.key);
+      console.log('Selected preset label: ', currentPreset.label);
+    } else {
+      console.log('Manual selection (no preset)');
+    }
   } else {
     console.log('Clear');
   }
 };
 
 const presets = ref([
-  { label: 'Yesterday', value: dayjs().add(-1, 'd') },
-  { label: 'Last Week', value: dayjs().add(-7, 'd') },
-  { label: 'Last Month', value: dayjs().add(-1, 'month') },
+  { label: 'Yesterday', value: dayjs().add(-1, 'd'), key: 'yesterday' },
+  { label: 'Last Week', value: dayjs().add(-7, 'd'), key: 'lastweek' },
+  { label: 'Last Month', value: dayjs().add(-1, 'month'), key: 'lastmonth' },
 ]);
 
 const rangePresets = ref([
-  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
-  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
-  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
-  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
+  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()], key: 'last7days' },
+  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()], key: 'last14days' },
+  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()], key: 'last30days' },
+  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()], key: 'last90days' },
 ]);
 </script>

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -13,7 +13,7 @@ import useConfigInject from '../../config-provider/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
 import type { CommonProps, RangePickerProps } from './props';
 import { commonProps, rangePickerProps } from './props';
-import type { PanelMode, RangeValue } from '../../vc-picker/interface';
+import type { PanelMode, RangeValue, RangePickerOnChange } from '../../vc-picker/interface';
 import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
 import omit from '../../_util/omit';
@@ -84,13 +84,18 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
           pickerRef.value?.blur();
         },
       });
-      const maybeToStrings = (dates: DateType[]) => {
+      const maybeToStrings = (dates: RangeValue<DateType>) => {
         return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates;
       };
-      const onChange = (dates: RangeValue<DateType>, dateStrings: [string, string]) => {
-        const values = maybeToStrings(dates);
-        emit('update:value', values);
-        emit('change', values, dateStrings);
+      const onChange: RangePickerOnChange<DateType> = (values, formatStrings) => {
+        const [startValue, endValue, currentPreset] = values;
+        const [startStr, endStr] = formatStrings;
+        const dates: RangeValue<DateType> = [startValue, endValue];
+        const dateStrings: [string, string] = [startStr, endStr];
+
+        const processedValues = maybeToStrings(dates);
+        emit('update:value', processedValues);
+        emit('change', processedValues, dateStrings, currentPreset);
         formItemContext.onFieldChange();
       };
       const onOpenChange = (open: boolean) => {
@@ -109,7 +114,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
         emit('panelChange', values, modes);
       };
       const onOk = (dates: DateType[]) => {
-        const value = maybeToStrings(dates);
+        const value = props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates;
         emit('ok', value);
       };
       const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (