feat(DatePicker): support week and year multiple

src/date-picker/DatePicker.tsx

@@ -15,6 +15,7 @@ import useDefaultProps from '../hooks/useDefaultProps';
 import useLatest from '../hooks/useLatest';
 import useUpdateEffect from '../hooks/useUpdateEffect';
 import type { TagInputRemoveContext } from '../tag-input';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
 
 export interface DatePickerProps extends TdDatePickerProps, StyledProps {}
 
@@ -64,6 +65,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     setCacheValue,
   } = useSingle(props);
 
+  const [local] = useLocaleReceiver('datePicker');
   const { format, timeFormat, valueType } = getDefaultFormat({
     mode,
     format: props.format,
@@ -241,7 +243,9 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
   }, []);
 
   function processDate(date: Date) {
-    const isSameDate = (value as DateMultipleValue).some((val) => isSame(dayjs(val).toDate(), date));
+    const isSameDate = (value as DateMultipleValue).some((val) =>
+      isSame(parseToDayjs(val, format).toDate(), date, mode, local.dayjsLocale),
+    );
     let currentDate: DateMultipleValue;
 
     if (!isSameDate) {

src/date-picker/__tests__/date-picker.test.tsx

@@ -105,7 +105,7 @@ describe('DatePicker', () => {
   });
 
   test('mode week', async () => {
-    const { container: container1 } = render(<DatePicker mode={'week'} value={'2022-37th'} />);
+    const { container: container1 } = render(<DatePicker mode={'week'} />);
     fireEvent.mouseDown(container1.querySelector('input'));
     const weekEle = await waitFor(() => document.querySelector('.t-date-picker__panel-week'));
     expect(weekEle).not.toBeNull();

src/date-picker/_example/multiple.tsx

@@ -1,24 +1,52 @@
 import React, { useState } from 'react';
-import { DatePicker } from 'tdesign-react';
+import { DatePicker, Space } from 'tdesign-react';
 import type { DatePickerProps, DateMultipleValue } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  const [defaultValue, setDefaultValue] = useState<DateMultipleValue>(['2000-01-04', '2000-01-03', '2000-01-05']);
+  const [dateValue, setDateValue] = useState<DateMultipleValue>(['2000-01-04', '2000-01-03', '2000-01-10']);
+  const [weekValue, setWeekValue] = useState<DateMultipleValue>(['2024-50周', '2024-51周']);
+  const [yearValue, setYearValue] = useState<DateMultipleValue>(['2000', '2001', '2002']);
 
-  const handleChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => {
+  const handleDateChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => {
     console.log('onChange:', value, context);
-    setDefaultValue(value);
+    setDateValue(value);
+  };
+
+  const handleWeekChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => {
+    console.log('onChange:', value, context);
+    setWeekValue(value);
+  };
+
+  const handleYearChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => {
+    console.log('onChange:', value, context);
+    setYearValue(value);
   };
 
   return (
-    <div>
+    <Space direction="vertical">
+      <DatePicker
+        value={dateValue}
+        placeholder="可清除、可输入的日期选择器"
+        onChange={handleDateChange}
+        clearable
+        multiple
+      />
+      <DatePicker
+        value={weekValue}
+        placeholder="可清除、可输入的日期选择器"
+        onChange={handleWeekChange}
+        clearable
+        multiple
+        mode="week"
+      />
       <DatePicker
-        value={defaultValue}
+        value={yearValue}
         placeholder="可清除、可输入的日期选择器"
-        onChange={handleChange}
+        onChange={handleYearChange}
         clearable
         multiple
+        mode="year"
       />
-    </div>
+    </Space>
   );
 }

src/date-picker/base/Table.tsx

@@ -2,18 +2,21 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
+import type { Dayjs } from 'dayjs';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import useConfig from '../../hooks/useConfig';
 import DatePickerCell from './Cell';
-import { TdDatePickerProps } from '../type';
+
 import { SinglePanelProps } from '../panel/SinglePanel';
 import { PanelContentProps } from '../panel/PanelContent';
 import { parseToDayjs } from '../../_common/js/date-picker/format';
 
+import type { DateMultipleValue, DateRangeValue, DateValue, TdDatePickerProps } from '../type';
+
 dayjs.extend(isoWeek);
 
 export interface DatePickerTableProps
-  extends Pick<TdDatePickerProps, 'mode' | 'firstDayOfWeek' | 'format'>,
+  extends Pick<TdDatePickerProps, 'mode' | 'firstDayOfWeek' | 'format' | 'multiple'>,
     Pick<SinglePanelProps, 'onCellClick' | 'onCellMouseEnter' | 'onCellMouseLeave'>,
     Pick<PanelContentProps, 'value'> {
   data?: Array<any>;
@@ -59,8 +62,22 @@ const DatePickerTable = (props: DatePickerTableProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, value, format]);
 
+  const multipleValueYearWeek = useMemo(() => {
+    if (mode !== 'week' || !Array.isArray(value) || (Array.isArray(value) && !value.length)) return [];
+
+    const DateMultipleValue = (value as DateMultipleValue).map((v) => v && parseToDayjs(v, format));
+
+    return DateMultipleValue.map((item) => {
+      const year = item?.year?.();
+      const week = item?.locale?.(local.dayjsLocale)?.week?.();
+
+      return { year, week };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, value, format, props.multiple]);
+
   // 高亮周区间
-  const weekRowClass = (value, targetDayjs) => {
+  const weekRowClass = (value: DateValue | DateRangeValue, targetDayjs: Dayjs) => {
     if (mode !== 'week' || !value) return {};
 
     if (Array.isArray(value)) {
@@ -90,6 +107,18 @@ const DatePickerTable = (props: DatePickerTableProps) => {
     };
   };
 
+  // multiple
+  const multipleWeekRowClass = (value: DateMultipleValue, targetDayjs: Dayjs) => {
+    if (mode !== 'week' || (Array.isArray(value) && !value.length)) return {};
+
+    const isSomeYearWeek = multipleValueYearWeek.some((item) => item.week === targetDayjs.week());
+    return {
+      [`${classPrefix}-date-picker__table-${mode}-row--active`]: isSomeYearWeek,
+    };
+  };
+
+  const activeRowCss = props.multiple ? multipleWeekRowClass : weekRowClass;
+
   return (
     <div className={`${classPrefix}-date-picker__table`} onMouseLeave={(e) => onCellMouseLeave?.({ e })}>
       <table>
@@ -107,7 +136,7 @@ const DatePickerTable = (props: DatePickerTableProps) => {
             <tr
               key={i}
               className={classNames(`${classPrefix}-date-picker__table-${mode}-row`, {
-                ...weekRowClass(value, row[0].dayjsObj),
+                ...activeRowCss(value, row[0].dayjsObj),
               })}
             >
               {row.map((col: any, j: number) => (

src/date-picker/panel/PanelContent.tsx

@@ -19,7 +19,7 @@ export interface PanelContentProps {
   timePickerProps: SinglePanelProps['timePickerProps'];
   firstDayOfWeek: SinglePanelProps['firstDayOfWeek'];
   time: SinglePanelProps['time'];
-
+  multiple?: SinglePanelProps['multiple'];
   popupVisible?: boolean;
   tableData: any[];
   onMonthChange: SinglePanelProps['onMonthChange'] | RangePanelProps['onMonthChange'];
@@ -104,6 +104,7 @@ export default function PanelContent(props: PanelContentProps) {
           time={time}
           format={format}
           firstDayOfWeek={firstDayOfWeek}
+          multiple={props.multiple}
           onCellClick={(date: Date, { e }) => onCellClick?.(date, { e, partial })}
           onCellMouseEnter={(date: Date) => onCellMouseEnter?.(date, { partial })}
           onCellMouseLeave={onCellMouseLeave}