From 647a3acb42502aa785ce09e5cbdece5274e78083 Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Tue, 3 Dec 2024 22:16:16 +0800 Subject: [PATCH 01/12] feat(datepicker): support week multiple --- src/date-picker/DatePicker.tsx | 10 ++++--- src/date-picker/_example/multiple.tsx | 24 ++++++++++++++--- src/date-picker/base/Table.tsx | 37 +++++++++++++++++++++++--- src/date-picker/panel/PanelContent.tsx | 3 ++- 4 files changed, 62 insertions(+), 12 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index f5208a8396..a2ad5538d4 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 {} @@ -63,6 +64,7 @@ const DatePicker = forwardRef((originalProps, r setCacheValue, } = useSingle(props); + const [local] = useLocaleReceiver('datePicker'); const { format, timeFormat, valueType } = getDefaultFormat({ mode, format: props.format, @@ -240,7 +242,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) { @@ -248,8 +252,8 @@ const DatePicker = forwardRef((originalProps, r } else { currentDate = (value as DateMultipleValue).filter( (val) => - formatDate(val, { format, targetFormat: valueType }) !== - formatDate(date, { format, targetFormat: valueType }), + formatDate(val, { format, targetFormat: valueType, dayjsLocale: local.dayjsLocale }) !== + formatDate(date, { format, targetFormat: valueType, dayjsLocale: local.dayjsLocale }), ); } diff --git a/src/date-picker/_example/multiple.tsx b/src/date-picker/_example/multiple.tsx index ad047fdd74..9c0cff5263 100644 --- a/src/date-picker/_example/multiple.tsx +++ b/src/date-picker/_example/multiple.tsx @@ -1,9 +1,9 @@ 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 [defaultValue, setDefaultValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); const handleChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => { console.log('onChange:', value, context); @@ -11,14 +11,30 @@ export default function YearDatePicker() { }; return ( -
+ + {/* */} -
+ {/* */} + ); } diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index a92e0e4abc..19b5bd9131 100644 --- a/src/date-picker/base/Table.tsx +++ b/src/date-picker/base/Table.tsx @@ -1,15 +1,16 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; +import type { Dayjs } from 'dayjs'; import { useLocaleReceiver } from '../../locale/LocalReceiver'; import useConfig from '../../hooks/useConfig'; import DatePickerCell from './Cell'; -import { TdDatePickerProps } from '../type'; +import type { DateMultipleValue, DateRangeValue, DateValue, TdDatePickerProps } from '../type'; import { SinglePanelProps } from '../panel/SinglePanel'; import { PanelContentProps } from '../panel/PanelContent'; import { parseToDayjs } from '../../_common/js/date-picker/format'; export interface DatePickerTableProps - extends Pick, + extends Pick, Pick, Pick { data?: Array; @@ -55,8 +56,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) && !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]); + // 高亮周区间 - const weekRowClass = (value, targetDayjs) => { + const weekRowClass = (value: DateValue | DateRangeValue, targetDayjs: Dayjs) => { if (mode !== 'week' || !value) return {}; if (Array.isArray(value)) { @@ -85,6 +100,20 @@ 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.year === targetDayjs.year() && item.week === targetDayjs.week(), + ); + return { + [`${classPrefix}-date-picker__table-${mode}-row--active`]: isSomeYearWeek, + }; + }; + + const activeRowCss = props.multiple ? multipleWeekRowClass : weekRowClass; + return (
onCellMouseLeave?.({ e })}> @@ -102,7 +131,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 a9c19cfbe5..4441a5e993 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} From 65405b53a644d772d1213ce00181f5c91768a07b Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Tue, 3 Dec 2024 22:59:20 +0800 Subject: [PATCH 02/12] docs(datepicker): add week and year multiple example --- src/date-picker/_example/multiple.tsx | 8 +- test/snap/__snapshots__/csr.test.jsx.snap | 335 ++++++++++++++++++---- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 3 files changed, 286 insertions(+), 59 deletions(-) diff --git a/src/date-picker/_example/multiple.tsx b/src/date-picker/_example/multiple.tsx index 9c0cff5263..3c1547f56b 100644 --- a/src/date-picker/_example/multiple.tsx +++ b/src/date-picker/_example/multiple.tsx @@ -12,13 +12,13 @@ export default function YearDatePicker() { return ( - {/* */} + /> - {/* */} + /> ); } diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 89ba5c753e..d9817e8cbf 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -32855,109 +32855,336 @@ 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 - + + 2020-53周 + + + + +
+
+ + 2020-53周 + + + + +
+
+ + 2020-53周 + + + + +
+
+ + 可清除、可输入的日期选择器 + + -
+ +
+
+
+
+ +
+
+
+
+
- - 2000-01-05 - + + 2000 + + + + +
+
+ + 2000 + + + + +
+
+ + 2000 + + + + +
+
+ + 可清除、可输入的日期选择器 + + -
+
- - 可清除、可输入的日期选择器 - - - - - -
@@ -134867,7 +135094,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
可清除、可输入的日期选择器
2020-53周
2020-53周
2020-53周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; 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 2069359111..b472bc351a 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
可清除、可输入的日期选择器
2020-53周
2020-53周
2020-53周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; 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
"`; From 1a765e1ad014e9d74002c8336c585749376e7e0a Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Tue, 3 Dec 2024 23:18:30 +0800 Subject: [PATCH 03/12] fix(datepicker): fix PanelContent multiple type --- src/date-picker/panel/PanelContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index 4441a5e993..44db079d2e 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']; + multiple?: SinglePanelProps['multiple']; popupVisible?: boolean; tableData: any[]; onMonthChange: SinglePanelProps['onMonthChange'] | RangePanelProps['onMonthChange']; From 16cae7c1e72416d4678175ba703a328451528358 Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Tue, 3 Dec 2024 23:36:43 +0800 Subject: [PATCH 04/12] test(datepicker): fix multiple test --- src/date-picker/base/Table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index 19b5bd9131..b49578b954 100644 --- a/src/date-picker/base/Table.tsx +++ b/src/date-picker/base/Table.tsx @@ -57,7 +57,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { }, [mode, value, format]); const multipleValueYearWeek = useMemo(() => { - if (mode !== 'week' || (Array.isArray(value) && !value.length)) return []; + if (mode !== 'week' || !Array.isArray(value) || (Array.isArray(value) && !value.length)) return []; const DateMultipleValue = (value as DateMultipleValue).map((v) => v && parseToDayjs(v, format)); @@ -68,7 +68,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { return { year, week }; }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [mode, value, format]); + }, [mode, value, format, props.multiple]); // 高亮周区间 const weekRowClass = (value: DateValue | DateRangeValue, targetDayjs: Dayjs) => { From 58e004ef4392ba3c4e1a3104d770cde704454e9a Mon Sep 17 00:00:00 2001 From: Heising Date: Wed, 4 Dec 2024 09:28:37 +0800 Subject: [PATCH 05/12] docs(DatePicker): optimize DatePicker example --- src/date-picker/_example/multiple.tsx | 30 +++++++++++++++++++-------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/date-picker/_example/multiple.tsx b/src/date-picker/_example/multiple.tsx index 3c1547f56b..2440fbe6da 100644 --- a/src/date-picker/_example/multiple.tsx +++ b/src/date-picker/_example/multiple.tsx @@ -3,34 +3,46 @@ 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-10']); + const [dateValue, setDateValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); + const [weekValue, setWeekValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); + const [yearValue, setYearValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); - 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 ( Date: Wed, 4 Dec 2024 07:45:35 +0000 Subject: [PATCH 06/12] chore: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 94e21e27e2..e1c0b856aa 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 94e21e27e2aba45cc0da263d424537f453055180 +Subproject commit e1c0b856aa2f801a5b7809e019ac8e532e9a2a89 From 9558563d4cb71dc94f3e246def7f8e9351eb20fc Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Wed, 4 Dec 2024 23:18:11 +0800 Subject: [PATCH 07/12] fix(datepicker): fix DatePicker week test --- src/date-picker/__tests__/date-picker.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx index 274c6cc146..d8c2cc5181 100644 --- a/src/date-picker/__tests__/date-picker.test.tsx +++ b/src/date-picker/__tests__/date-picker.test.tsx @@ -105,7 +105,7 @@ describe('DatePicker', () => { }); test('mode week', async () => { - const { container: container1 } = render(); + const { container: container1 } = render(); fireEvent.mouseDown(container1.querySelector('input')); const weekEle = await waitFor(() => document.querySelector('.t-date-picker__panel-week')); expect(weekEle).not.toBeNull(); From ec0d32859a789dcc1c996c28c07cdf84a46bb0c9 Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Wed, 4 Dec 2024 23:24:52 +0800 Subject: [PATCH 08/12] test(datepicker): update test snap --- test/snap/__snapshots__/csr.test.jsx.snap | 14 +++++++------- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index d9817e8cbf..242e17ddd0 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -32993,9 +32993,9 @@ exports[`csr snapshot test > csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2020-53周 + 2000-1周 csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2020-53周 + 2000-1周 csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2020-53周 + 2000-2周 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-10
可清除、可输入的日期选择器
2020-53周
2020-53周
2020-53周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; +exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-10
可清除、可输入的日期选择器
2000-1周
2000-1周
2000-2周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; 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 b472bc351a..a91eaadadc 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-10
可清除、可输入的日期选择器
2020-53周
2020-53周
2020-53周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; +exports[`ssr snapshot test > ssr test src/date-picker/_example/multiple.tsx 1`] = `"
2000-01-04
2000-01-03
2000-01-10
可清除、可输入的日期选择器
2000-1周
2000-1周
2000-2周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; 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
"`; From 353f99771ef25bf653346e9f2180feae0134771f Mon Sep 17 00:00:00 2001 From: HaixingOoO <974758671@qq.com> Date: Tue, 17 Dec 2024 23:05:56 +0800 Subject: [PATCH 09/12] fix(datepicker): fix DatePicker week multiple judgment --- src/date-picker/base/Table.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index 02b431cf48..c8ab9c8b55 100644 --- a/src/date-picker/base/Table.tsx +++ b/src/date-picker/base/Table.tsx @@ -111,9 +111,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { const multipleWeekRowClass = (value: DateMultipleValue, targetDayjs: Dayjs) => { if (mode !== 'week' || (Array.isArray(value) && !value.length)) return {}; - const isSomeYearWeek = multipleValueYearWeek.some( - (item) => item.year === targetDayjs.year() && item.week === targetDayjs.week(), - ); + const isSomeYearWeek = multipleValueYearWeek.some((item) => item.week === targetDayjs.week()); return { [`${classPrefix}-date-picker__table-${mode}-row--active`]: isSomeYearWeek, }; From 16facec8b228de9eda670f8221c3ee3ad15142f4 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 18 Dec 2024 18:10:28 +0800 Subject: [PATCH 10/12] chore: correct demo init value --- src/date-picker/_example/multiple.tsx | 4 +-- test/snap/__snapshots__/csr.test.jsx.snap | 39 ++++++----------------- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 3 files changed, 12 insertions(+), 33 deletions(-) diff --git a/src/date-picker/_example/multiple.tsx b/src/date-picker/_example/multiple.tsx index 2440fbe6da..60b45a5c08 100644 --- a/src/date-picker/_example/multiple.tsx +++ b/src/date-picker/_example/multiple.tsx @@ -4,8 +4,8 @@ import type { DatePickerProps, DateMultipleValue } from 'tdesign-react'; export default function YearDatePicker() { const [dateValue, setDateValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); - const [weekValue, setWeekValue] = useState(['2000-01-04', '2000-01-03', '2000-01-10']); - const [yearValue, setYearValue] = 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 handleDateChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => { console.log('onChange:', value, context); diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 859ff89e79..6593f394fd 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -32774,9 +32774,9 @@ exports[`csr snapshot test > csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2000-1周 + 2024-50周 csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2000-1周 - - - - - -
- - 2000-2周 + 2024-51周 csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2000 + 2001 csr test src/date-picker/_example/multiple.tsx 1`] class="t-tag t-tag--default t-tag--dark" > - 2000 + 2002 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-10
可清除、可输入的日期选择器
2000-1周
2000-1周
2000-2周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; +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 ccb551bc5b..1d6d75a9c1 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-10
可清除、可输入的日期选择器
2000-1周
2000-1周
2000-2周
可清除、可输入的日期选择器
2000
2000
2000
可清除、可输入的日期选择器
"`; +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
"`; From 9dde98eb9387b189d5790c0fe7c0ae347a94bd71 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 19 Dec 2024 00:42:16 +0800 Subject: [PATCH 11/12] chore: fix cross year week --- src/_common | 2 +- src/date-picker/__tests__/date-picker.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_common b/src/_common index ba9628561f..ca5e721121 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit ba9628561f44199bbbc69c1a1232016eeb402b68 +Subproject commit ca5e721121a945ad702f60b75314d1124ae01e3a diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx index 6fc509b8bf..fbe9101042 100644 --- a/src/date-picker/__tests__/date-picker.test.tsx +++ b/src/date-picker/__tests__/date-picker.test.tsx @@ -105,7 +105,7 @@ describe('DatePicker', () => { }); test('mode week', async () => { - const { container: container1 } = render(); + const { container: container1 } = render(); fireEvent.mouseDown(container1.querySelector('input')); const weekEle = await waitFor(() => document.querySelector('.t-date-picker__panel-week')); expect(weekEle).not.toBeNull(); From a0bb8e72406531ca74902020fa73981641ef81b4 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 19 Dec 2024 12:10:23 +0800 Subject: [PATCH 12/12] chore: fix cross year week --- src/_common | 2 +- src/date-picker/base/Table.tsx | 19 ++++--------------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/_common b/src/_common index ca5e721121..b0815e9e96 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit ca5e721121a945ad702f60b75314d1124ae01e3a +Subproject commit b0815e9e960d2c44e5fa076a877568fa9121b0bf diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index c8ab9c8b55..a6ae6aa701 100644 --- a/src/date-picker/base/Table.tsx +++ b/src/date-picker/base/Table.tsx @@ -2,6 +2,7 @@ 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'; @@ -62,20 +63,6 @@ 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: DateValue | DateRangeValue, targetDayjs: Dayjs) => { if (mode !== 'week' || !value) return {}; @@ -110,8 +97,10 @@ const DatePickerTable = (props: DatePickerTableProps) => { // multiple const multipleWeekRowClass = (value: DateMultipleValue, targetDayjs: Dayjs) => { if (mode !== 'week' || (Array.isArray(value) && !value.length)) return {}; + const isSomeYearWeek = value + .map((v) => parseToDayjs(v, format)) + .some((item) => item.isoWeek() === targetDayjs.isoWeek() && item.isoWeekYear() === targetDayjs.isoWeekYear()); - const isSomeYearWeek = multipleValueYearWeek.some((item) => item.week === targetDayjs.week()); return { [`${classPrefix}-date-picker__table-${mode}-row--active`]: isSomeYearWeek, };