feat: add previewValue option

docs/examples/basic.tsx

@@ -154,6 +154,15 @@ export default () => {
           <h3>Keyboard event with prevent default behaviors</h3>
           <Picker<Moment> {...sharedProps} locale={enUS} onKeyDown={keyDown} />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>ShowPreviewValue is false</h3>
+          <Picker<Moment>
+            {...sharedProps}
+            locale={enUS}
+            onKeyDown={keyDown}
+            showPreviewValue={false}
+          />
+        </div>
       </div>
     </div>
   );

docs/examples/range.tsx

@@ -202,6 +202,17 @@ export default () => {
             disabledDate={disabledDate}
           />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>ShowPreviewValue is false</h3>
+          <RangePicker<Moment>
+            {...sharedProps}
+            showPreviewValue={false}
+            value={undefined}
+            locale={zhCN}
+            placeholder={['start...', 'end...']}
+            disabledDate={disabledDate}
+          />
+        </div>
       </div>
     </div>
   );

docs/examples/time.tsx

@@ -12,7 +12,7 @@ const testClassNames = {
   suffix: 'test-suffix',
   popupContent: 'test-popup-content',
   popupItem: 'test-popup-item',
-}
+};
 
 export default () => {
   return (
@@ -53,6 +53,18 @@ export default () => {
           disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]),
         })}
       />
+
+      <h3>ShowPreviewValue is false</h3>
+      <RangePicker
+        defaultValue={[defaultValue, defaultValue]}
+        picker="time"
+        locale={zhCN}
+        showPreviewValue={false}
+        generateConfig={momentGenerateConfig}
+        disabledTime={(now, type) => ({
+          disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]),
+        })}
+      />
     </div>
   );
 };

src/PickerInput/RangePicker.tsx

@@ -164,6 +164,7 @@ function RangePicker<DateType extends object = any>(
     styles: propStyles,
     classNames: propClassNames,
 
+    showPreviewValue = true,
     // Value
     defaultValue,
     value,
@@ -505,7 +506,9 @@ function RangePicker<DateType extends object = any>(
 
   // ======================== Panel =========================
   const onPanelHover = (date: DateType) => {
-    setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
+    if (showPreviewValue) {
+      setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
+    }
     setHoverSource('cell');
   };
 

src/PickerInput/SinglePicker.tsx

@@ -128,6 +128,8 @@ function Picker<DateType extends object = any>(
     styles: propStyles,
     classNames: propClassNames,
 
+    showPreviewValue = true,
+
     // Value
     order,
     defaultValue,
@@ -433,7 +435,9 @@ function Picker<DateType extends object = any>(
 
   // ======================== Panel =========================
   const onPanelHover = (date: DateType | null) => {
-    setInternalHoverValue(date);
+    if (showPreviewValue) {
+      setInternalHoverValue(date);
+    }
     setHoverSource('cell');
   };
 

src/interface.tsx

@@ -425,6 +425,8 @@ export interface SharedPickerProps<DateType extends object = any>
    */
   preserveInvalidOnBlur?: boolean;
 
+  showPreviewValue?: boolean;
+
   // Motion
   transitionName?: string;
 

tests/range.spec.tsx

@@ -2120,4 +2120,32 @@ describe('Picker.Range', () => {
     openPicker(container, 1);
     expect(container.querySelectorAll('.rc-picker-input')[0]).toHaveClass('rc-picker-input-active');
   });
+
+  it('should not update preview value in input when showPreviewValue is false', () => {
+    const { container } = render(
+      <DayRangePicker
+        minDate={dayjs('2024')}
+        open
+        mode={['year', 'year']}
+        showTime
+        showPreviewValue={false}
+        needConfirm
+        value={[dayjs('2024-01-01'), dayjs('2025-01-01')]}
+      />,
+    );
+
+    // 找到第一个输入框并保存初始值
+    const inputStart = container.querySelectorAll<HTMLInputElement>('.rc-picker-input input')[0];
+    const initialValueStart = inputStart.value;
+
+    // 打开第一个面板并 hover 一个新值（例如 2028 年）
+    const targetCell = document.querySelector('[title="2028"]') as HTMLElement;
+    expect(targetCell).toBeTruthy(); // 确保存在
+
+    // 2. 模拟鼠标移入（hover）
+    fireEvent.mouseEnter(targetCell);
+
+    // 确保值未更新（仍为原值）
+    expect(inputStart.value).toBe(initialValueStart);
+  });
 });

tests/time.spec.tsx

@@ -1,7 +1,8 @@
 import { fireEvent, render } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
-import { DayPicker, getDay, openPicker, selectCell, findCell } from './util/commonUtil';
+import dayjs from 'dayjs';
+import { DayPicker, getDay, openPicker, selectCell } from './util/commonUtil';
 
 describe('Picker.Time', () => {
   beforeEach(() => {
@@ -68,4 +69,49 @@ describe('Picker.Time', () => {
     fireEvent.mouseEnter(getColCell(4, 1));
     expect(container.querySelector('input')).toHaveValue('1990-09-03 12:00:00.000 PM');
   });
+
+  it('hover should not update preview value in input when showPreviewValue is false', async () => {
+    const { container } = render(
+      <DayPicker
+        showTime={{
+          showMillisecond: true,
+          use12Hours: true,
+        }}
+        showPreviewValue={false}
+        defaultValue={dayjs('1990-09-03 01:02:03')}
+      />,
+    );
+    openPicker(container);
+
+    const getColCell = (colIndex: number, cellIndex: number) => {
+      const column = document.querySelectorAll('.rc-picker-time-panel-column')[colIndex];
+      const cell = column.querySelectorAll('.rc-picker-time-panel-cell-inner')[cellIndex];
+
+      return cell;
+    };
+
+    // Hour
+    fireEvent.mouseEnter(getColCell(0, 3));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+
+    // Let test for mouse leave
+    fireEvent.mouseLeave(getColCell(0, 3));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+
+    // Minute
+    fireEvent.mouseEnter(getColCell(1, 2));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+
+    // Second
+    fireEvent.mouseEnter(getColCell(2, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+
+    // Millisecond
+    fireEvent.mouseEnter(getColCell(3, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+
+    // Meridiem
+    fireEvent.mouseEnter(getColCell(4, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 01:02:03.000 AM');
+  });
 });