diff --git a/src/time-picker/_usage/time-range-picker-props.json b/src/time-picker/_usage/time-range-picker-props.json index 89d8c056c..bb296e81c 100644 --- a/src/time-picker/_usage/time-range-picker-props.json +++ b/src/time-picker/_usage/time-range-picker-props.json @@ -4,6 +4,12 @@ "type": "Boolean", "defaultValue": false, "options": [] + }, + { + "name": "autoSwap", + "type": "Boolean", + "defaultValue": true, + "options": [] }, { "name": "borderless", diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index 0591185e9..c71290833 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -50,6 +50,7 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \- name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +autoSwap | Boolean | true | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | Typescript:`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 600daccc1..7b35923c5 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -50,6 +50,7 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N +autoSwap | Boolean | true | 是否自动调换左右区间的顺序,默认为 true;若需要支持跨天的场景,可以设置为 false | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项。TS 类型:`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts index 939beaaf6..34184031b 100644 --- a/src/time-picker/time-range-picker-props.ts +++ b/src/time-picker/time-range-picker-props.ts @@ -10,6 +10,11 @@ import { PropType } from 'vue'; export default { /** 是否允许直接输入时间 */ allowInput: Boolean, + /** 是否自动调换左右区间的顺序,默认为 true;若需要支持跨天的场景,可以设置为 false */ + autoSwap: { + type: Boolean, + default: true, + }, /** 无边框模式 */ borderless: Boolean, /** 是否允许清除选中值 */ diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx index ffdbdeb1c..b0c6178d2 100644 --- a/src/time-picker/time-range-picker.tsx +++ b/src/time-picker/time-range-picker.tsx @@ -42,7 +42,6 @@ export default defineComponent({ const currentPanelIdx = ref(undefined); const currentValue = ref>(TIME_PICKER_EMPTY); const isShowPanel = ref(false); - let openedPanels: number[] = []; const inputClasses = computed(() => [ `${componentName.value}__group`, @@ -73,7 +72,6 @@ export default defineComponent({ const handleClick = ({ position }: { position: 'first' | 'second' }) => { currentPanelIdx.value = position === 'first' ? 0 : 1; - openedPanels.push(currentPanelIdx.value); }; const handleTimeChange = (newValue: string) => { @@ -84,18 +82,6 @@ export default defineComponent({ } }; - const setCurrentValue2InnerValue = () => { - const [startTime, endTime] = currentValue.value; - const startDayjs = dayjs(startTime, props.format); - const endDayjs = dayjs(endTime, props.format); - - if (startDayjs.isAfter(endDayjs, 'second')) { - setInnerValue([currentValue.value[1], currentValue.value[0]]); - } else { - setInnerValue([currentValue.value[0], currentValue.value[1]]); - } - }; - const handleInputBlur = (value: TimeRangeValue, { e }: { e: FocusEvent }) => { if (props.allowInput) { const isValidTime = validateInputValue(currentValue.value[currentPanelIdx.value], format.value); @@ -104,7 +90,6 @@ export default defineComponent({ currentPanelIdx.value === 0 ? (currentValue.value = [formattedVal, currentValue.value[1] ?? formattedVal]) : (currentValue.value = [currentValue.value[0] ?? formattedVal, formattedVal]); - setCurrentValue2InnerValue(); } } props.onBlur?.({ value, e }); @@ -120,33 +105,29 @@ export default defineComponent({ }; const handleClickConfirm = () => { - if (openedPanels.length < 2) { - currentPanelIdx.value = currentPanelIdx.value === 1 ? 0 : 1; - openedPanels.push(currentPanelIdx.value); - return; - } - - const noValidIndex = currentValue.value.findIndex((v) => !validateInputValue(v, format.value)); - if (noValidIndex !== -1) { - currentPanelIdx.value = noValidIndex; - openedPanels.push(currentPanelIdx.value); - return; - } - - setCurrentValue2InnerValue(); + const isValidTime = !currentValue.value.find((v) => !validateInputValue(v, format.value)); + if (isValidTime) setInnerValue(currentValue.value); + if (props.autoSwap) autoSwapTime(); isShowPanel.value = false; }; const handleFocus = (value: TimeRangeValue, { e, position }: { e: FocusEvent; position: RangeInputPosition }) => { - const panelIndex = position === 'first' ? 0 : 1; - if (isShowPanel.value && currentPanelIdx.value !== panelIndex) { - currentPanelIdx.value = panelIndex; - openedPanels.push(currentPanelIdx.value); - } props.onFocus?.({ value, e, position: position === 'first' ? 'start' : 'end' }); ctx.emit('focus', { value, e, position: position === 'first' ? 'start' : 'end' }); }; + const autoSwapTime = () => { + const [startTime, endTime] = currentValue.value; + const startDayjs = dayjs(startTime, props.format); + const endDayjs = dayjs(endTime, props.format); + + if (startDayjs.isAfter(endDayjs, 'second')) { + setInnerValue([currentValue.value[1], currentValue.value[0]]); + } else { + setInnerValue([currentValue.value[0], currentValue.value[1]]); + } + }; + const handleOnPick = (pickValue: string, e: MouseEvent) => { let pickedRangeValue = []; let context: { e: MouseEvent; position?: TimeRangePickerPartial } = { e }; @@ -165,10 +146,7 @@ export default defineComponent({ () => isShowPanel.value, () => { currentValue.value = isShowPanel.value ? innerValue.value ?? TIME_PICKER_EMPTY : TIME_PICKER_EMPTY; - if (!isShowPanel.value) { - currentPanelIdx.value = undefined; - openedPanels = []; - } + if (!isShowPanel.value) currentPanelIdx.value = undefined; }, ); return { diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 3417b0773..51cc18f73 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -134,6 +134,11 @@ export interface TdTimeRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 是否自动调换左右区间的顺序,默认为 true;若需要支持跨天的场景,可以设置为 false + * @default true + */ + autoSwap?: boolean; /** * 无边框模式 * @default false