Skip to content

Commit 3c30844

Browse files
betavsgithub-actions[bot]
betavs
and
github-actions[bot]
authored
fix(date-picker): handle tag removal for week and quarter modes (#3653)
* fix(date-picker): handle tag removal for week and quarter modes * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 9096c0a commit 3c30844

File tree

7 files changed

+143
-10
lines changed

7 files changed

+143
-10
lines changed

‎src/date-picker/DatePicker.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,13 @@ export default defineComponent({
268268
}
269269

270270
const onTagRemoveClick = (ctx: TagInputRemoveContext) => {
271+
if (['week', 'quarter'].includes(props.mode)) {
272+
onChange?.(ctx.value, {
273+
trigger: 'tag-remove',
274+
});
275+
return;
276+
}
277+
271278
const removeDate = dayjs(ctx.item).toDate();
272279
const newDate = processDate(removeDate);
273280
onChange?.(newDate, {

‎src/date-picker/_example-composition/multiple.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
<template>
22
<t-space direction="vertical">
3-
<t-date-picker v-model="date" placeholder="可清除、可输入的日期选择器" clearable multiple @change="handleChange" />
3+
<t-date-picker v-model="date" placeholder="支持日期的多选" clearable multiple @change="handleChange" />
4+
<t-date-picker v-model="week" mode="week" placeholder="支持周的多选" clearable multiple @change="handleChange" />
5+
<t-date-picker
6+
v-model="quarter"
7+
mode="quarter"
8+
placeholder="支持季度的多选"
9+
clearable
10+
multiple
11+
@change="handleChange"
12+
/>
413
</t-space>
514
</template>
615

716
<script setup>
817
import { ref } from 'vue';
918
1019
const date = ref(['2000-01-04', '2000-01-03', '2000-01-05']);
20+
const week = ref([]);
21+
const quarter = ref([]);
1122
const handleChange = (value, context) => {
1223
console.log('onChange:', value, context);
13-
console.log('timestamp:', context.dayjsValue.valueOf());
14-
console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
1524
};
1625
</script>

‎src/date-picker/_example/multiple.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<template>
22
<t-space direction="vertical">
33
<t-date-picker v-model="date" placeholder="支持日期的多选" clearable multiple @change="handleChange" />
4+
<t-date-picker v-model="week" mode="week" placeholder="支持周的多选" clearable multiple @change="handleChange" />
5+
<t-date-picker
6+
v-model="quarter"
7+
mode="quarter"
8+
placeholder="支持季度的多选"
9+
clearable
10+
multiple
11+
@change="handleChange"
12+
/>
413
</t-space>
514
</template>
615

@@ -9,13 +18,13 @@ export default {
918
data() {
1019
return {
1120
date: ['2024-01-04'],
21+
week: [],
22+
quarter: [],
1223
};
1324
},
1425
methods: {
1526
handleChange(value, context) {
1627
console.log('onChange:', value, context);
17-
console.log('timestamp:', context.dayjsValue.valueOf());
18-
console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
1928
},
2029
},
2130
};

‎src/date-picker/date-picker.en-US.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typ
3636
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
3737
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
3838
onBlur | Function | | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/> | N
39-
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
39+
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' \| 'tag-remove'`<br/> | N
40+
onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/>Triggered when the clear button is clicked | N
4041
onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N
4142
onFocus | Function | | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/> | N
4243
onPick | Function | | Typescript：`(value: DateValue) => void`<br/> | N
@@ -47,7 +48,8 @@ onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: M
4748
name | params | description
4849
-- | -- | --
4950
blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \-
50-
change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [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/>
51+
change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [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' \| 'tag-remove'`<br/>
52+
clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clicked
5153
confirm | `(context: { date: Date, e: MouseEvent })` | \-
5254
focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \-
5355
pick | `(value: DateValue)` | \-

‎src/date-picker/date-picker.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性
3636
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
3737
cancelRangeSelectLimit | Boolean | false | 说明：默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
3838
onBlur | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
39-
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
39+
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' \| 'tag-remove'`<br/> | N
40+
onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N
4041
onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N
4142
onFocus | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
4243
onPick | Function | | TS 类型：`(value: DateValue) => void`<br/>面板选中值后触发 | N
@@ -47,7 +48,8 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo
4748
名称 | 参数 | 描述
4849
-- | -- | --
4950
blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 当输入框失去焦点时触发
50-
change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](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/>
51+
change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](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' \| 'tag-remove'`<br/>
52+
clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发
5153
confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确定”按钮，则点击“确定”按钮时触发
5254
focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 输入框获得焦点时触发
5355
pick | `(value: DateValue)` | 面板选中值后触发

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39830,6 +39830,110 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/multiple.vue 1`
3983039830
</div>
3983139831
</div>
3983239832
</div>
39833+
<div
39834+
class="t-space-item"
39835+
>
39836+
<div
39837+
class="t-date-picker"
39838+
>
39839+
<div
39840+
class="t-select-input t-select-input--multiple t-select-input--empty"
39841+
>
39842+
<div
39843+
class="t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon"
39844+
>
39845+
<div
39846+
class="t-input t-is-readonly t-input--prefix t-input--suffix"
39847+
>
39848+
<div
39849+
class="t-input__prefix"
39850+
/>
39851+
<input
39852+
autocomplete=""
39853+
class="t-input__inner"
39854+
placeholder="支持周的多选"
39855+
readonly="readonly"
39856+
type="text"
39857+
unselectable="on"
39858+
/>
39859+
<span
39860+
class="t-input__input-pre"
39861+
>
39862+
支持周的多选
39863+
</span>
39864+
<span
39865+
class="t-input__suffix t-input__suffix-icon"
39866+
>
39867+
<svg
39868+
class="t-icon t-icon-calendar"
39869+
fill="none"
39870+
height="1em"
39871+
viewBox="0 0 24 24"
39872+
width="1em"
39873+
>
39874+
<path
39875+
d="M6 4V1.5H8V4H16V1.5H18V4H22V22H2V4H6ZM4 6V9H20V6H4ZM20 11H4V20H20V11Z"
39876+
fill="currentColor"
39877+
/>
39878+
</svg>
39879+
</span>
39880+
</div>
39881+
</div>
39882+
</div>
39883+
</div>
39884+
</div>
39885+
<div
39886+
class="t-space-item"
39887+
>
39888+
<div
39889+
class="t-date-picker"
39890+
>
39891+
<div
39892+
class="t-select-input t-select-input--multiple t-select-input--empty"
39893+
>
39894+
<div
39895+
class="t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon"
39896+
>
39897+
<div
39898+
class="t-input t-is-readonly t-input--prefix t-input--suffix"
39899+
>
39900+
<div
39901+
class="t-input__prefix"
39902+
/>
39903+
<input
39904+
autocomplete=""
39905+
class="t-input__inner"
39906+
placeholder="支持季度的多选"
39907+
readonly="readonly"
39908+
type="text"
39909+
unselectable="on"
39910+
/>
39911+
<span
39912+
class="t-input__input-pre"
39913+
>
39914+
支持季度的多选
39915+
</span>
39916+
<span
39917+
class="t-input__suffix t-input__suffix-icon"
39918+
>
39919+
<svg
39920+
class="t-icon t-icon-calendar"
39921+
fill="none"
39922+
height="1em"
39923+
viewBox="0 0 24 24"
39924+
width="1em"
39925+
>
39926+
<path
39927+
d="M6 4V1.5H8V4H16V1.5H18V4H22V22H2V4H6ZM4 6V9H20V6H4ZM20 11H4V20H20V11Z"
39928+
fill="currentColor"
39929+
/>
39930+
</svg>
39931+
</span>
39932+
</div>
39933+
</div>
39934+
</div>
39935+
</div>
39936+
</div>
3983339937
</div>
3983439938
`;
3983539939

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)