fix: RangePicker showTime defaultValue should work

Author: zombieJ

src/RangePicker.tsx

@@ -15,6 +15,7 @@ import { toArray } from './utils/miscUtil';
 import RangeContext from './RangeContext';
 import { isSameDate } from './utils/dateUtil';
 import { getDefaultFormat } from './utils/uiUtil';
+import { SharedTimeProps } from './panels/TimePanel';
 
 type RangeValue<DateType> = [DateType | null, DateType | null] | null;
 
@@ -66,6 +67,7 @@ type OmitPickerProps<Props> = Omit<
   | 'placeholder'
   | 'disabledTime'
   | 'showToday'
+  | 'showTime'
 >;
 
 export interface RangePickerBaseProps<DateType>
@@ -74,7 +76,13 @@ export interface RangePickerBaseProps<DateType>
 
 export interface RangePickerDateProps<DateType>
   extends RangePickerSharedProps<DateType>,
-    OmitPickerProps<PickerDateProps<DateType>> {}
+    OmitPickerProps<PickerDateProps<DateType>> {
+  showTime?:
+    | boolean
+    | (Omit<SharedTimeProps<DateType>, 'defaultValue'> & {
+        defaultValue?: DateType[];
+      });
+}
 
 export interface RangePickerTimeProps<DateType>
   extends RangePickerSharedProps<DateType>,
@@ -133,6 +141,16 @@ function InternalRangePicker<DateType>(
     getDefaultFormat(format, picker, showTime, use12Hours),
   );
 
+  const [startShowTime, endShowTime] = React.useMemo(() => {
+    if (showTime && typeof showTime === 'object' && showTime.defaultValue) {
+      return [
+        { ...showTime, defaultValue: showTime.defaultValue[0] },
+        { ...showTime, defaultValue: showTime.defaultValue[1] },
+      ];
+    }
+    return [showTime, showTime];
+  }, [showTime]);
+
   const mergedSelectable = React.useMemo<
     [boolean | undefined, boolean | undefined]
   >(() => [selectable && selectable[0], selectable && selectable[1]], [
@@ -312,7 +330,7 @@ function InternalRangePicker<DateType>(
           value={value1}
           placeholder={placeholder && placeholder[0]}
           defaultPickerValue={defaultPickerValue && defaultPickerValue[0]}
-          {...{ disabledTime: disabledStartTime }} // Fix ts define
+          {...{ disabledTime: disabledStartTime, showTime: startShowTime }} // Fix ts define
           disabled={disabled || mergedSelectable[0] === false}
           disabledDate={disabledStartDate}
           onChange={date => {
@@ -329,7 +347,7 @@ function InternalRangePicker<DateType>(
           value={value2}
           placeholder={placeholder && placeholder[1]}
           defaultPickerValue={defaultPickerValue && defaultPickerValue[1]}
-          {...{ disabledTime: disabledEndTime }} // Fix ts define
+          {...{ disabledTime: disabledEndTime, showTime: endShowTime }} // Fix ts define
           disabled={disabled || mergedSelectable[1] === false}
           disabledDate={disabledEndDate}
           onChange={date => {

src/panels/DatePanel/DateBody.tsx

@@ -89,6 +89,11 @@ function DateBody<DateType>({
       row.push(
         <td
           key={`${x}-${y}`}
+          title={generateConfig.locale.format(
+            locale.locale,
+            currentDate,
+            'YYYY-MM-DD',
+          )}
           onClick={() => {
             if (disabled) {
               return;

src/panels/MonthPanel/MonthBody.tsx

@@ -55,6 +55,11 @@ function MonthBody<DateType>({
       row.push(
         <td
           key={j}
+          title={generateConfig.locale.format(
+            locale.locale,
+            monthDate,
+            'YYYY-MM',
+          )}
           className={classNames(monthPrefixCls, {
             [`${monthPrefixCls}-disabled`]: disabled,
             [`${monthPrefixCls}-in-view`]: true,

src/panels/YearPanel/YearBody.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { GenerateConfig } from '../../generate';
 import { YEAR_DECADE_COUNT } from '.';
+import { Locale } from '../../interface';
 
 export const YEAR_COL_COUNT = 3;
 const YEAR_ROW_COUNT = 4;
 
 export interface YearBodyProps<DateType> {
   prefixCls: string;
+  locale: Locale;
   generateConfig: GenerateConfig<DateType>;
   viewDate: DateType;
   disabledDate?: (date: DateType) => boolean;
@@ -17,6 +19,7 @@ export interface YearBodyProps<DateType> {
 function YearBody<DateType>({
   prefixCls,
   viewDate,
+  locale,
   generateConfig,
   disabledDate,
   onSelect,
@@ -46,6 +49,7 @@ function YearBody<DateType>({
       row.push(
         <td
           key={j}
+          title={generateConfig.locale.format(locale.locale, yearDate, 'YYYY')}
           className={classNames(yearPrefixCls, {
             [`${yearPrefixCls}-disabled`]: disabled,
             [`${yearPrefixCls}-in-view`]:

tests/__snapshots__/picker.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`Basic icon 1`] = `
 >
   <input
     readonly=""
+    size="12"
     value="1990-09-03"
   />
   <span

tests/range.spec.tsx

@@ -426,5 +426,25 @@ describe('Range', () => {
       ref.current!.rangePickerRef.current!.blur();
       expect(blurred).toBeTruthy();
     });
+
+    it('not crash with showTime defaultValue', () => {
+      const wrapper = mount(
+        <MomentRangePicker
+          showTime={{
+            defaultValue: [getMoment('01:02:03'), getMoment('05:06:07')],
+          }}
+        />,
+      );
+
+      wrapper.openPicker();
+      wrapper.selectCell(13);
+      wrapper.closePicker();
+
+      wrapper.openPicker(1);
+      wrapper.selectCell(23, 1);
+      wrapper.closePicker(1);
+
+      matchValues(wrapper, '1990-09-13 01:02:03', '1990-09-23 05:06:07');
+    });
   });
 });