feat: support multiple select

src/date-picker/DatePicker.tsx

@@ -171,6 +171,7 @@ export default defineComponent({
     }
 
     function processDate(date: Date) {
+      if (!value.value) return [];
       const isSameDate = (value.value as DateMultipleValue).some((val) => isSame(dayjs(val).toDate(), date));
       let currentDate: DateMultipleValue;
 
@@ -311,6 +312,7 @@ export default defineComponent({
       format: formatRef.value.format,
       mode: props.mode,
       presets: props.presets,
+      multiple: props.multiple,
       time: props.multiple ? false : time.value,
       disableDate: props.disableDate,
       firstDayOfWeek: props.firstDayOfWeek,

src/date-picker/_example/multiple.vue

@@ -1,6 +1,6 @@
 <template>
   <t-space direction="vertical">
-    <t-date-picker multiple />
+    <t-date-picker multiple :default-value="[]" />
     <t-date-picker mode="week" multiple />
     <t-date-picker mode="year" multiple />
   </t-space>

src/date-picker/hooks/useSingleValue.tsx

@@ -18,7 +18,7 @@ export default function useSingleValue(props: TdDatePickerProps) {
     getDefaultFormat({
       mode: props.mode,
       format: props.format,
-      enableTimePicker: props.enableTimePicker,
+      enableTimePicker: props.multiple ? false : props.enableTimePicker,
     }),
   );
 
@@ -28,9 +28,11 @@ export default function useSingleValue(props: TdDatePickerProps) {
   }
 
   const time = ref(formatTime(value.value, formatRef.value.format, formatRef.value.timeFormat, props.defaultTime));
-  const month = ref<number>(parseToDayjs(value.value, formatRef.value.format).month());
-  const year = ref<number>(parseToDayjs(value.value, formatRef.value.format).year());
-  const cacheValue = ref(formatDate(value.value, { format: formatRef.value.format })); // 缓存选中值，panel 点击时更改
+  const month = ref<number>(
+    parseToDayjs(props.multiple ? value.value[0] : value.value, formatRef.value.format).month(),
+  );
+  const year = ref<number>(parseToDayjs(props.multiple ? value.value[0] : value.value, formatRef.value.format).year());
+  const cacheValue = ref(formatDate(props.multiple ? value.value[0] : value.value, { format: formatRef.value.format })); // 缓存选中值，panel 点击时更改
 
   // 输入框响应 value 变化
   watchEffect(() => {

src/date-picker/panel/SinglePanel.tsx

@@ -2,11 +2,12 @@ import { defineComponent, PropType, computed } from 'vue';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
 import TPanelContent from './PanelContent';
 import TExtraContent from './ExtraContent';
-import { TdDatePickerProps } from '../type';
 import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format';
 import useTableData from '../hooks/useTableData';
 import useDisableDate from '../hooks/useDisableDate';
 
+import { TdDatePickerProps } from '../type';
+
 export default defineComponent({
   name: 'TSinglePanel',
   props: {
@@ -29,6 +30,7 @@ export default defineComponent({
     month: Number,
     time: String,
     popupVisible: Boolean,
+    multiple: Boolean,
     needConfirm: {
       type: Boolean,
       default: true,
@@ -70,8 +72,11 @@ export default defineComponent({
         year: props.year,
         month: props.month,
         mode: props.mode,
-        start: props.value ? parseToDayjs(props.value, format.value).toDate() : undefined,
+        start: props.value
+          ? parseToDayjs(props.multiple ? (props.value as any)?.[0] : props.value, format.value).toDate()
+          : undefined,
         firstDayOfWeek: props.firstDayOfWeek || globalConfig.value.firstDayOfWeek,
+        multiple: props.multiple,
         ...disableDateOptions.value,
       }),
     );
@@ -85,7 +90,7 @@ export default defineComponent({
       firstDayOfWeek: props.firstDayOfWeek || globalConfig.value.firstDayOfWeek,
       tableData: tableData.value,
       popupVisible: props.popupVisible,
-
+      multiple: props.multiple,
       enableTimePicker: props.enableTimePicker,
       timePickerProps: props.timePickerProps,
       time: props.time,

src/date-picker/type.ts

@@ -367,7 +367,6 @@ export interface TdDatePickerPanelProps
     | 'value'
     | 'defaultValue'
     | 'disableDate'
-    | 'disableTime'
     | 'enableTimePicker'
     | 'firstDayOfWeek'
     | 'format'

src/tag-input/tag-input.tsx

@@ -123,7 +123,7 @@ export default defineComponent({
     const onClick: TdInputProps['onClick'] = (ctx) => {
       if (isDisabled.value) return;
       isFocused.value = true;
-      tagInputRef.value.focus();
+      tagInputRef.value?.focus();
       props.onClick?.(ctx);
     };