diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 49a90ec5ab..9220ca31a2 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -42620,6 +42620,601 @@ exports[`renders components/date-picker/demo/multiple-debug.tsx extend context c
+
+
+
+ + Bamboo + +
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 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 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap index 745b2ed438..d7ecef5bdc 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap @@ -3315,6 +3315,50 @@ exports[`renders components/date-picker/demo/multiple-debug.tsx correctly 1`] =
+
+
+
+ + Bamboo + +
+ + + + + + +
diff --git a/components/date-picker/demo/multiple-debug.tsx b/components/date-picker/demo/multiple-debug.tsx index f582b34518..0597e23bf9 100644 --- a/components/date-picker/demo/multiple-debug.tsx +++ b/components/date-picker/demo/multiple-debug.tsx @@ -6,6 +6,7 @@ const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01') const App: React.FC = () => ( + diff --git a/components/date-picker/style/multiple.ts b/components/date-picker/style/multiple.ts index 5456c0e439..49cede88a9 100644 --- a/components/date-picker/style/multiple.ts +++ b/components/date-picker/style/multiple.ts @@ -65,15 +65,33 @@ const genPickerMultipleStyle: GenerateStyle = (token) => { { [`${componentCls}${componentCls}-multiple`]: { width: '100%', + cursor: 'text', // ==================== Selector ===================== [`${componentCls}-selector`]: { flex: 'auto', padding: 0, + position: 'relative', '&:after': { margin: 0, }, + + // ================== placeholder ================== + [`${componentCls}-selection-placeholder`]: { + position: 'absolute', + top: '50%', + insetInlineStart: token.inputPaddingHorizontalBase, + insetInlineEnd: 0, + transform: 'translateY(-50%)', + transition: `all ${token.motionDurationSlow}`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + flex: 1, + color: token.colorTextPlaceholder, + pointerEvents: 'none', + }, }, // ===================== Overflow ==================== diff --git a/package.json b/package.json index 49bf26cfdd..559b4e6e03 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,7 @@ "rc-motion": "^2.9.0", "rc-notification": "~5.4.0", "rc-pagination": "~4.0.4", - "rc-picker": "~4.3.2", + "rc-picker": "~4.4.1", "rc-progress": "~4.0.0", "rc-rate": "~2.12.0", "rc-resize-observer": "^1.4.0",