diff --git a/src/_common b/src/_common index 94e21e27e..ca5e72112 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 94e21e27e2aba45cc0da263d424537f453055180 +Subproject commit ca5e721121a945ad702f60b75314d1124ae01e3a diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 5c2f35cdd..962ed80f6 100644 --- a/src/date-picker/DatePicker.tsx +++ b/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((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((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) { diff --git a/src/date-picker/_example/multiple.tsx b/src/date-picker/_example/multiple.tsx index ad047fdd7..60b45a5c0 100644 --- a/src/date-picker/_example/multiple.tsx +++ b/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(['2000-01-04', '2000-01-03', '2000-01-05']); + const [dateValue, setDateValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); + const [weekValue, setWeekValue] = useState(['2024-50周', '2024-51周']); + const [yearValue, setYearValue] = useState(['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 ( -
+ + + -
+ ); } diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index a65a9eefc..c8ab9c8b5 100644 --- a/src/date-picker/base/Table.tsx +++ b/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, + extends Pick, Pick, Pick { data?: Array; @@ -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 (
onCellMouseLeave?.({ e })}> @@ -107,7 +136,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { {row.map((col: any, j: number) => ( diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index a9c19cfbe..44db079d2 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/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} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 8d392daf7..6593f394f 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -32636,109 +32636,315 @@ exports[`csr snapshot test > csr test src/date-picker/_example/month.tsx 1`] = ` exports[`csr snapshot test > csr test src/date-picker/_example/multiple.tsx 1`] = `
-
+
- - 2000-01-04 - + + 2000-01-04 + + + + +
+
+ + 2000-01-03 + + + + +
+
+ + 2000-01-10 + + + + +
+
+ + 可清除、可输入的日期选择器 + + -
+ +
+
+
+
+
+
+
+
+
+
- - 2000-01-03 - + + 2024-50周 + + + + +
+
+ + 2024-51周 + + + + +
+
+ + 可清除、可输入的日期选择器 + + -
+ +
+
+
+
+ +
+
+
+
+
- - 2000-01-05 - + + 2000 + + + + +
+
+ + 2001 + + + + +
+
+ + 2002 + + + + +
+
+ + 可清除、可输入的日期选择器 + + -
+
- - 可清除、可输入的日期选择器 - - - - - -
@@ -134333,7 +134539,7 @@ exports[`ssr snapshot test > ssr test src/date-picker/_example/first-day-of-week exports[`ssr snapshot test > ssr test src/date-picker/_example/month.tsx 1`] = `"
~
"`; -exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-05
可清除、可输入的日期选择器
"`; +exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-10
可清除、可输入的日期选择器
2024-50周
2024-51周
可清除、可输入的日期选择器
2000
2001
2002
可清除、可输入的日期选择器
"`; exports[`ssr snapshot test > ssr test src/date-picker/_example/panel.tsx 1`] = `"
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
00:00:00
Confirm
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
MonTueWedThuFriSatSun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
00:00:00
Confirm
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 337aa9e60..1d6d75a9c 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -292,7 +292,7 @@ exports[`ssr snapshot test > ssr test src/date-picker/_example/first-day-of-week exports[`ssr snapshot test > ssr test src/date-picker/_example/month.tsx 1`] = `"
~
"`; -exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-05
可清除、可输入的日期选择器
"`; +exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-10
可清除、可输入的日期选择器
2024-50周
2024-51周
可清除、可输入的日期选择器
2000
2001
2002
可清除、可输入的日期选择器
"`; exports[`ssr snapshot test > ssr test src/date-picker/_example/panel.tsx 1`] = `"
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
00:00:00
Confirm
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
MonTueWedThuFriSatSun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
MonTueWedThuFriSatSun
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
00:00:00
Confirm
"`;