feat(DatePicker): support cancelRangeSelectLimit API

Tencent · Jan 3, 2025 · 5dd8a26 · 5dd8a26
1 parent b93c503
commit 5dd8a26
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 0 deletions.
diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -410,6 +410,7 @@ export default defineComponent({
       presetsPlacement: props.presetsPlacement,
       panelPreselection: props.panelPreselection,
       popupVisible: popupVisible.value,
+      cancelRangeSelectLimit: props.cancelRangeSelectLimit,
       onCellClick,
       onCellMouseEnter,
       onCellMouseLeave,

diff --git a/src/date-picker/_example-composition/cancel-range-limit.vue b/src/date-picker/_example-composition/cancel-range-limit.vue
@@ -0,0 +1,11 @@
+<template>
+  <t-space direction="vertical">
+    <t-date-range-picker v-model="range" cancel-range-select-limit />
+  </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const range = ref(['', '']);
+</script>
diff --git a/src/date-picker/_example/cancel-range-limit.vue b/src/date-picker/_example/cancel-range-limit.vue
@@ -0,0 +1,15 @@
+<template>
+  <t-space direction="vertical">
+    <t-date-range-picker v-model="range" cancel-range-select-limit />
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      range: ['', ''],
+    };
+  },
+};
+</script>
diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -34,6 +34,7 @@ tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more
 value | String / Number / Array / Date | '' | `v-model` is supported。Typescript：`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array<DateValue> `。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array<DateValue> `。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+cancelRangeSelectLimit | Boolean | false | Explanation: The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
 onBlur | Function |  | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N
 onConfirm | Function |  | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -34,6 +34,7 @@ tips | String / Slot / Function | - | 输入框下方提示文本，会根据不
 value | String / Number / Array / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array<DateValue> `。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array<DateValue> `。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+cancelRangeSelectLimit | Boolean | false | 说明：默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
 onBlur | Function |  | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N
 onConfirm | Function |  | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N

diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts
@@ -159,6 +159,17 @@ export default {
       ].includes(val);
     },
   },
+  /**
+   * 禁用日期选择限制
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。
+   * 比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。
+   * 此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。
+   * 当该值传递true时，则取消该限制
+   */
+  cancelRangeSelectLimit: {
+    type: Boolean,
+    default: false,
+  },
   /** 当输入框失去焦点时触发 */
   onBlur: Function as PropType<TdDateRangePickerProps['onBlur']>,
   /** 选中值发生变化时触发 */

diff --git a/src/date-picker/hooks/useTableData.ts b/src/date-picker/hooks/useTableData.ts
@@ -17,6 +17,7 @@ export default function useTableData(props: any) {
     quarterLocal: global.value.quarters,
     showWeekOfYear: props.mode === 'week',
     dayjsLocale: global.value.dayjsLocale,
+    cancelRangeSelectLimit: props.cancelRangeSelectLimit,
   };
 
   let data: Array<any> = [];

diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx
@@ -41,6 +41,7 @@ export default defineComponent({
     year: Array as PropType<Array<number>>,
     month: Array as PropType<Array<number>>,
     time: Array as PropType<Array<string>>,
+    cancelRangeSelectLimit: Boolean,
     onClick: Function,
     onCellClick: Function,
     onCellMouseEnter: Function,
@@ -116,6 +117,7 @@ export default defineComponent({
       mode: props.mode,
       firstDayOfWeek: props.firstDayOfWeek || global.value.firstDayOfWeek,
       ...disableDateOptions.value,
+      cancelRangeSelectLimit: props.cancelRangeSelectLimit,
     }));
 
     const endTableData = computed(() => useTableData({
@@ -135,6 +137,7 @@ export default defineComponent({
       mode: props.mode,
       firstDayOfWeek: props.firstDayOfWeek || global.value.firstDayOfWeek,
       ...disableDateOptions.value,
+      cancelRangeSelectLimit: props.cancelRangeSelectLimit,
     }));
 
     const panelContentProps = computed(() => ({

diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
@@ -18,6 +18,11 @@ export interface TdDatePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
+   * @default false
+   */
+  cancelRangeSelectLimit?: boolean;
   /**
    * 无边框模式
    * @default false