feat(DatePicker): support cancelRangeSelectLimit API (#3460)

* feat(DatePicker): support cancelRangeSelectLimit API

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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,

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>

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>

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

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

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']>,
   /** 选中值发生变化时触发 */

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> = [];

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(() => ({

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

test/snap/__snapshots__/csr.test.js.snap

@@ -38564,6 +38564,87 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/base.vue 1`] =
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/date-picker/_example/cancel-range-limit.vue 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 16px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-date-range-picker"
+    >
+      <div
+        class="t-range-input-popup"
+      >
+        <div
+          class="t-range-input t-range-input--suffix"
+        >
+          <div
+            class="t-range-input__inner"
+          >
+            <div
+              class="t-input__wrap t-range-input__inner-left"
+            >
+              <div
+                class="t-input t-is-readonly"
+              >
+                <input
+                  autocomplete=""
+                  class="t-input__inner"
+                  placeholder="请选择日期"
+                  readonly="readonly"
+                  type="text"
+                  unselectable="on"
+                />
+              </div>
+            </div>
+            <div
+              class="t-range-input__inner-separator"
+            >
+               - 
+            </div>
+            <div
+              class="t-input__wrap t-range-input__inner-right"
+            >
+              <div
+                class="t-input t-is-readonly"
+              >
+                <input
+                  autocomplete=""
+                  class="t-input__inner"
+                  placeholder="请选择日期"
+                  readonly="readonly"
+                  type="text"
+                  unselectable="on"
+                />
+              </div>
+            </div>
+            <span
+              class="t-range-input__suffix t-range-input__suffix-icon"
+            >
+              <svg
+                class="t-icon t-icon-calendar"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/date-picker/_example/custom-icon.vue 1`] = `
 <div
   class="t-space t-space-vertical"

test/snap/__snapshots__/ssr.test.js.snap

@@ -308,6 +308,8 @@ exports[`ssr snapshot test > renders ./src/config-provider/_example/table.vue co
 
 exports[`ssr snapshot test > renders ./src/date-picker/_example/base.vue correctly 1`] = `"<div data-server-rendered="true" class="t-space t-space-vertical" style="gap:16px;"><div class="t-space-item"><div class="t-date-picker"><div class="t-select-input t-select-input--empty"><div class="t-input__wrap"><div class="t-input t-is-readonly test-inputClass t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-date-picker"><div class="t-select-input t-select-input--empty"><div class="t-input__wrap"><div class="t-input t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input autocomplete="" placeholder="可清除、可输入的日期选择器" type="text" unselectable="off" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"></path></svg></span></div></div></div></div></div></div>"`;
 
+exports[`ssr snapshot test > renders ./src/date-picker/_example/cancel-range-limit.vue correctly 1`] = `"<div data-server-rendered="true" class="t-space t-space-vertical" style="gap:16px;"><div class="t-space-item"><div class="t-date-range-picker"><div class="t-range-input-popup"><div class="t-range-input t-range-input--suffix"><div class="t-range-input__inner"><div class="t-input__wrap t-range-input__inner-left"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="" class="t-input__inner"></div></div><div class="t-range-input__inner-separator"> - </div><div class="t-input__wrap t-range-input__inner-right"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="" class="t-input__inner"></div></div><span class="t-range-input__suffix t-range-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"></path></svg></span></div></div></div></div></div></div>"`;
+
 exports[`ssr snapshot test > renders ./src/date-picker/_example/custom-icon.vue correctly 1`] = `"<div data-server-rendered="true" class="t-space t-space-vertical" style="gap:16px;"><div class="t-space-item"><div class="t-date-picker"><div class="t-select-input t-select-input--empty"><div class="t-input__wrap"><div class="t-input t-is-readonly t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse"><g clip-path="url(#clip0_8726_7319)"><path fill="currentColor" d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"></path></g></svg></span><div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/date-picker/_example/date-presets-alt.vue correctly 1`] = `"<div data-server-rendered="true" class="t-space t-space-vertical" style="gap:16px;"><div class="t-space-item"><div class="t-date-range-picker"><div class="t-range-input-popup"><div class="t-range-input t-range-input--suffix"><div class="t-range-input__inner"><div class="t-input__wrap t-range-input__inner-left"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="2022-01-01" class="t-input__inner"></div></div><div class="t-range-input__inner-separator"> - </div><div class="t-input__wrap t-range-input__inner-right"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="2022-08-08" class="t-input__inner"></div></div><span class="t-range-input__suffix t-range-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-date-range-picker"><div class="t-range-input-popup"><div class="t-range-input t-range-input--suffix"><div class="t-range-input__inner"><div class="t-input__wrap t-range-input__inner-left"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="2022-01-01 00:00:00" class="t-input__inner"></div></div><div class="t-range-input__inner-separator"> - </div><div class="t-input__wrap t-range-input__inner-right"><div class="t-input t-is-readonly"><input readonly="readonly" autocomplete="" placeholder="请选择日期" type="text" unselectable="on" value="2022-08-08 23:59:59" class="t-input__inner"></div></div><span class="t-range-input__suffix t-range-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"></path></svg></span></div></div></div></div></div></div>"`;