diff --git a/components/vc-picker/PanelContext.tsx b/components/vc-picker/PanelContext.tsx index 5ea2f23b6..c312724c6 100644 --- a/components/vc-picker/PanelContext.tsx +++ b/components/vc-picker/PanelContext.tsx @@ -23,6 +23,9 @@ export type PanelContextProps = { /** Only used for TimePicker and this is a deprecated prop */ defaultOpenValue?: Ref; + + /** Double click state for RangePicker */ + isDoubleClickRef?: Ref; }; const PanelContextKey: InjectionKey = Symbol('PanelContextProps'); diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx index 69cb823dd..84a65d4f2 100644 --- a/components/vc-picker/RangePicker.tsx +++ b/components/vc-picker/RangePicker.tsx @@ -263,6 +263,8 @@ function RangerPicker() { const needConfirmButton = computed( () => (props.picker === 'date' && !!props.showTime) || props.picker === 'time', ); + + const isDoubleClickRef = ref(false); const presets = computed(() => props.presets); const ranges = computed(() => props.ranges); const presetList = usePresets(presets, ranges); @@ -970,10 +972,30 @@ function RangerPicker() { const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => { const values = updateValues(selectedValue.value, date, mergedActivePickerIndex.value); + const currentIndex = mergedActivePickerIndex.value; + const isDoubleClick = isDoubleClickRef.value; + const shouldSwitch = type === 'mouse' && needConfirmButton.value && isDoubleClick; + + // Reset double click state + isDoubleClickRef.value = false; - if (type === 'submit' || (type !== 'key' && !needConfirmButton.value)) { + if (type === 'submit' || (type !== 'key' && !needConfirmButton.value) || shouldSwitch) { // triggerChange will also update selected values triggerChange(values, mergedActivePickerIndex.value); + + // If double click, switch to next input + // But check if both inputs are complete, if so don't switch to avoid animation before popup closes + if (shouldSwitch) { + const startValue = getValue(values, 0); + const endValue = getValue(values, 1); + const bothValuesComplete = startValue && endValue; + + if (!bothValuesComplete) { + const nextIndex = ((currentIndex + 1) % 2) as 0 | 1; + setMergedActivePickerIndex(nextIndex); + } + } + // clear hover value style if (mergedActivePickerIndex.value === 0) { onStartLeave(); @@ -993,6 +1015,7 @@ function RangerPicker() { hideRanges: computed(() => true), onSelect: onContextSelect, open: mergedOpen, + isDoubleClickRef, }); return () => { diff --git a/components/vc-picker/panels/PanelBody.tsx b/components/vc-picker/panels/PanelBody.tsx index b05be4a72..5dc3d5d6a 100644 --- a/components/vc-picker/panels/PanelBody.tsx +++ b/components/vc-picker/panels/PanelBody.tsx @@ -49,7 +49,7 @@ function PanelBody(_props: PanelBodyProps) { titleCell, headerCells, } = useMergeProps(_props); - const { onDateMouseenter, onDateMouseleave, mode } = useInjectPanel(); + const { onDateMouseenter, onDateMouseleave, mode, isDoubleClickRef } = useInjectPanel(); const cellPrefixCls = `${prefixCls}-cell`; @@ -99,6 +99,14 @@ function PanelBody(_props: PanelBodyProps) { onSelect(currentDate); } }} + onDblclick={e => { + e.stopPropagation(); + if (!disabled && isDoubleClickRef) { + // 设置双击状态 + isDoubleClickRef.value = true; + onSelect(currentDate); + } + }} onMouseenter={() => { if (!disabled && onDateMouseenter) { onDateMouseenter(currentDate);