github
/
ant-design-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: 修复RangePicker回填时间时的bug

pull/8366/head
yuanyi 2025-09-19 18:06:13 +04:00
parent 5843bf5fd9
commit b4603d2eeb
5 changed files with 334 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@ RangePicker supports two new features:
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs';
import { Dayjs } from 'dayjs';
type RangeValue = [Dayjs, Dayjs];
@ -84,7 +84,7 @@ const onWholeDayChange = (
dateStrings: [string, string],
currentPreset?: any,
) => {
if (values) {
if (values && values[0] && values[1]) {
console.log(
'Whole Day - From: ',
values[0].format('YYYY-MM-DD HH:mm:ss'),
@ -105,7 +105,7 @@ const onCombinedChange = (
dateStrings: [string, string],
currentPreset?: any,
) => {
if (values) {
if (values && values[0] && values[1]) {
console.log(
'Combined - From: ',
values[0].format('YYYY-MM-DD HH:mm:ss'),

3
components/date-picker/demo/index.vue
View File

@ -18,6 +18,7 @@
<statusVue />
<placementVue />
<AutoFillWholeDay />
<PresetAutofill />
</demo-sort>
</template>
<script>
@ -38,6 +39,7 @@ 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';
@ -65,6 +67,7 @@ export default defineComponent({
Bordered,
RangePicker,
AutoFillWholeDay,
PresetAutofill,
},
});
</script>

154
components/date-picker/demo/preset-autofill.vue Normal file
View File

@ -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>

2
components/table/hooks/useSorter.tsx
View File

@ -186,7 +186,7 @@ function injectSorter<RecordType>(
const cell = (column.customHeaderCell && column.customHeaderCell(col)) || {};
const originOnClick = cell.onClick;
const originOKeyDown = cell.onKeydown;
cell.onClick = (event: MouseEvent) => {
cell.onClick = (event: PointerEvent) => {
triggerSorter({
column,
key: columnKey,

179
components/vc-picker/RangePicker.tsx
View File

@ -320,10 +320,64 @@ function RangerPicker<DateType>() {
const [mergedValue, setInnerValue] = useMergedState<RangeValue<DateType>>(null, {
value: toRef(props, 'value'),
defaultValue: props.defaultValue,
postState: values =>
props.picker === 'time' && !props.order
postState: values => {
// 处理包含preset的value格式 [date, date, preset]
if (
values &&
Array.isArray(values) &&
(values as any).length === 3 &&
(values as any)[2]
) {
const preset = (values as any)[2];
// 如果preset有value属性，使用preset的value作为日期范围
if (preset.value && Array.isArray(preset.value) && preset.value.length === 2) {
const presetValues = preset.value;
// 检查preset.value是否是函数，如果是则执行函数获取当前值
let startValue =
typeof presetValues[0] === 'function' ? presetValues[0]() : presetValues[0];
let endValue =
typeof presetValues[1] === 'function' ? presetValues[1]() : presetValues[1];
// 判断props.isWholeDay是否为true，如果为false，则使用当前时间的时分秒
if (!props.isWholeDay) {
const now = props.generateConfig.getNow();
const currentHour = props.generateConfig.getHour(now);
const currentMinute = props.generateConfig.getMinute(now);
const currentSecond = props.generateConfig.getSecond(now);
startValue = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(startValue, currentSecond),
currentMinute,
),
currentHour,
);
endValue = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(endValue, currentSecond),
currentMinute,
),
currentHour,
);
}
if (startValue && endValue) {
// 设置当前preset
setCurrentPreset(preset);
// 返回preset计算出的日期范围
return props.picker === 'time' && !props.order
? [startValue, endValue]
: reorderValues([startValue, endValue], props.generateConfig);
}
}
}
// 处理普通格式的value
return props.picker === 'time' && !props.order
? values
: reorderValues(values, props.generateConfig),
: reorderValues(values, props.generateConfig);
},
});
// ========================= Current Preset =========================
@ -597,6 +651,61 @@ function RangerPicker<DateType>() {
values = [startWithTime, endWithTime];
}
// 如果通过preset触发，且preset有value属性，重新计算日期范围
if (
fromPreset &&
currentPreset.value &&
Array.isArray(currentPreset.value) &&
currentPreset.value.length === 2
) {
const presetValues = currentPreset.value;
// 检查preset.value是否是函数，如果是则执行函数获取当前值
const presetStartValue =
typeof presetValues[0] === 'function' ? presetValues[0]() : presetValues[0];
const presetEndValue =
typeof presetValues[1] === 'function' ? presetValues[1]() : presetValues[1];
if (presetStartValue && presetEndValue) {
// 如果启用了isWholeDay，应用时间设置
if (props.isWholeDay && showTime) {
const startWithTime = generateConfig.setHour(
generateConfig.setMinute(generateConfig.setSecond(presetStartValue, 0), 0),
0,
);
const endWithTime = generateConfig.setHour(
generateConfig.setMinute(generateConfig.setSecond(presetEndValue, 59), 59),
23,
);
values = [startWithTime, endWithTime];
} else if (showTime) {
// 如果未启用isWholeDay但启用了showTime，使用当前时间的时分秒
const now = generateConfig.getNow();
const currentHour = generateConfig.getHour(now);
const currentMinute = generateConfig.getMinute(now);
const currentSecond = generateConfig.getSecond(now);
const startWithCurrentTime = generateConfig.setHour(
generateConfig.setMinute(
generateConfig.setSecond(presetStartValue, currentSecond),
currentMinute,
),
currentHour,
);
const endWithCurrentTime = generateConfig.setHour(
generateConfig.setMinute(
generateConfig.setSecond(presetEndValue, currentSecond),
currentMinute,
),
currentHour,
);
values = [startWithCurrentTime, endWithCurrentTime];
} else {
// 如果没有启用showTime，保持preset的原始时间
values = [presetStartValue, presetEndValue];
}
}
}
setSelectedValue(values);
// 如果不是通过 preset 触发的，清除 currentPreset
@ -638,9 +747,11 @@ function RangerPicker<DateType>() {
(!isEqual(generateConfig, getValue(mergedValue.value, 0), startValue) ||
!isEqual(generateConfig, getValue(mergedValue.value, 1), endValue))
) {
// 如果通过preset触发，传递preset信息
const presetToPass = fromPreset ? currentPreset.value : currentPreset.value;
onChange(
[startValue, endValue, currentPreset.value],
[startStr, endStr, currentPreset.value?.key || null],
[startValue, endValue, presetToPass],
[startStr, endStr, presetToPass?.key || null],
);
}
}
@ -1247,7 +1358,63 @@ function RangerPicker<DateType>() {
currentPreset={currentPreset.value}
onClick={(nextValue, preset) => {
setCurrentPreset(preset);
triggerChange(nextValue, null, true);
// 如果preset有value属性，使用preset的value作为日期范围
let valuesToUse = nextValue;
if (preset.value && Array.isArray(preset.value) && preset.value.length === 2) {
const presetValues = preset.value;
// 检查preset.value是否是函数，如果是则执行函数获取当前值
const presetStartValue =
typeof presetValues[0] === 'function' ? presetValues[0]() : presetValues[0];
const presetEndValue =
typeof presetValues[1] === 'function' ? presetValues[1]() : presetValues[1];
if (presetStartValue && presetEndValue) {
// 如果启用了isWholeDay，应用时间设置
if (props.isWholeDay && props.showTime) {
const startWithTime = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(presetStartValue, 0),
0,
),
0,
);
const endWithTime = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(presetEndValue, 59),
59,
),
23,
);
valuesToUse = [startWithTime, endWithTime];
} else if (props.showTime) {
// 如果未启用isWholeDay但启用了showTime，使用当前时间的时分秒
const now = props.generateConfig.getNow();
const currentHour = props.generateConfig.getHour(now);
const currentMinute = props.generateConfig.getMinute(now);
const currentSecond = props.generateConfig.getSecond(now);
const startWithCurrentTime = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(presetStartValue, currentSecond),
currentMinute,
),
currentHour,
);
const endWithCurrentTime = props.generateConfig.setHour(
props.generateConfig.setMinute(
props.generateConfig.setSecond(presetEndValue, currentSecond),
currentMinute,
),
currentHour,
);
valuesToUse = [startWithCurrentTime, endWithCurrentTime];
} else {
// 如果没有启用showTime，保持preset的原始时间
valuesToUse = [presetStartValue, presetEndValue];
}
}
}
triggerChange(valuesToUse, null, true);
triggerOpen(false, mergedActivePickerIndex.value);
}}
onHover={hoverValue => {