feat(Datepicker): support multiple select

Tencent · Dec 25, 2024 · 55cc765 · 55cc765
1 parent 8f3b093
commit 55cc765
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 57 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -13,7 +13,7 @@ import TSelectInput from '../select-input';
 import TSinglePanel from './panel/SinglePanel';
 import { useReadonly } from '../hooks/useReadonly';
 
-import type { TdDatePickerProps, PresetDate, DateMultipleValue, DateValue } from './type';
+import type { TdDatePickerProps, DateMultipleValue, DateValue } from './type';
 import type { TagInputRemoveContext } from '../tag-input';
 import isDate from 'lodash/isDate';
 
@@ -148,7 +148,7 @@ export default defineComponent({
         if (props.multiple) {
           const newDate = processDate(date);
           onChange(newDate, {
-            dayjsValue: parseToDayjs(date, format),
+            dayjsValue: parseToDayjs(date, props.format),
             trigger: 'pick',
           });
           return;
@@ -175,12 +175,14 @@ export default defineComponent({
       let currentDate: DateMultipleValue;
 
       if (!isSameDate) {
-        currentDate = (value.value as DateMultipleValue).concat(formatDate(date, { format, targetFormat: valueType }));
+        currentDate = (value.value as DateMultipleValue).concat(
+          formatDate(date, { format: props.format, targetFormat: formatRef.value.valueType }),
+        );
       } else {
         currentDate = (value.value as DateMultipleValue).filter(
           (val) =>
-            formatDate(val, { format, targetFormat: valueType }) !==
-            formatDate(date, { format, targetFormat: valueType }),
+            formatDate(val, { format: props.format, targetFormat: formatRef.value.valueType }) !==
+            formatDate(date, { format: props.format, targetFormat: formatRef.value.valueType }),
         );
       }
 
@@ -191,14 +193,14 @@ export default defineComponent({
       const removeDate = dayjs(ctx.item).toDate();
       const newDate = processDate(removeDate);
       onChange?.(newDate, {
-        dayjsValue: parseToDayjs(removeDate, format),
+        dayjsValue: parseToDayjs(removeDate, props.format),
         trigger: 'pick',
       });
     };
 
-    const onTagClearClick = ({ e }) => {
+    const onTagClearClick = ({ e }: any) => {
       e.stopPropagation();
-      setPopupVisible(false);
+      popupVisible.value = false;
       onChange([], { dayjsValue: dayjs(), trigger: 'clear' });
     };
 

diff --git a/src/date-picker/_example-ts/multiple.vue b/src/date-picker/_example-ts/multiple.vue
@@ -1,31 +1,9 @@
 <template>
   <t-space direction="vertical">
-    <t-date-picker v-model="date2" @change="handleChange" />
-    <t-date-picker
-      v-model="date"
-      placeholder="可清除、可输入的日期选择器"
-      clearable
-      allow-input
-      @change="handleChange"
-    />
+    <t-date-picker multiple />
+    <t-date-picker mode="week" multiple />
+    <t-date-picker mode="year" multiple />
   </t-space>
 </template>
 
-<script lang="ts" setup>
-import { Dayjs } from 'dayjs';
-import { ref } from 'vue';
-import { DateValue, DatePickerTriggerSource } from 'tdesign-vue-next';
-const date = ref('');
-const date2 = ref('');
-function handleChange(
-  value: DateValue,
-  context: {
-    dayjsValue?: Dayjs;
-    trigger?: DatePickerTriggerSource;
-  },
-) {
-  console.log('onChange:', value, context);
-  console.log('timestamp:', context.dayjsValue.valueOf());
-  console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
-}
-</script>
+<script setup></script>
diff --git a/src/date-picker/_example/multiple.vue b/src/date-picker/_example/multiple.vue
@@ -1,25 +1,9 @@
 <template>
   <t-space direction="vertical">
-    <t-date-picker v-model="date2" @change="handleChange" />
-    <t-date-picker
-      v-model="date"
-      placeholder="可清除、可输入的日期选择器"
-      clearable
-      allow-input
-      @change="handleChange"
-    />
+    <t-date-picker multiple />
+    <t-date-picker mode="week" multiple />
+    <t-date-picker mode="year" multiple />
   </t-space>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-
-const date = ref('');
-const date2 = ref('');
-
-function handleChange(value, context) {
-  console.log('onChange:', value, context);
-  console.log('timestamp:', context.dayjsValue.valueOf());
-  console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
-}
-</script>
+<script setup></script>
diff --git a/src/date-picker/base/Footer.tsx b/src/date-picker/base/Footer.tsx
@@ -1,7 +1,9 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, PropType } from 'vue';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
 import TButton from '../../button';
 
+import type { TdDatePickerProps } from '../type';
+
 export default defineComponent({
   name: 'TDatePickerTable',
   props: {
@@ -12,7 +14,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    selectedValue: [Date, String, Number],
+    selectedValue: [String, Number, Array, Date] as PropType<TdDatePickerProps['value']>,
     onPresetClick: Function,
     onConfirmClick: Function,
   },

diff --git a/src/date-picker/base/Header.tsx b/src/date-picker/base/Header.tsx
@@ -2,6 +2,7 @@ import { defineComponent, PropType, ref, computed, watch } from 'vue';
 import { PaginationMini, JumperTrigger } from '../../pagination';
 import TSelect from '../../select';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+
 import type { TdDatePickerProps } from '../type';
 
 export default defineComponent({

diff --git a/src/date-picker/panel/ExtraContent.tsx b/src/date-picker/panel/ExtraContent.tsx
@@ -1,5 +1,6 @@
 import { defineComponent, PropType, computed } from 'vue';
 import TDateFooter from '../base/Footer';
+
 import type { TdDatePickerProps, TdDateRangePickerProps } from '../type';
 
 export default defineComponent({

diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
@@ -44,6 +44,7 @@ export default function useMultiple(
   const iKeys = computed<SelectInputKeys>(() => ({ ...DEFAULT_KEYS, ...props.keys }));
   const tags = computed<TagInputValue>(() => {
     if (!(props.value instanceof Array)) {
+      if (['', null, undefined].includes(props.value as any)) return [];
       return isObject(props.value) ? [props.value[iKeys.value.label]] : [props.value];
     }
     return props.value.map((item) => (isObject(item) ? item[iKeys.value.label] : item));

diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx
@@ -134,7 +134,7 @@ export default defineComponent({
     };
 
     const focus = () => {
-      tagInputRef.value.focus();
+      tagInputRef.value?.focus();
     };
 
     const blur = () => {