fix: date range picker type interface (#19421)

components/date-picker/RangePicker.tsx

@@ -11,7 +11,7 @@ import Tag from '../tag';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 import interopDefault from '../_util/interopDefault';
-import { RangePickerValue, RangePickerPresetRange } from './interface';
+import { RangePickerValue, RangePickerPresetRange, RangePickerProps } from './interface';
 import { formatDate } from './utils';
 import InputIcon from './InputIcon';
 
@@ -54,7 +54,7 @@ function isEmptyArray(arr: any) {
   return false;
 }
 
-function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
+function fixLocale(value: RangePickerValue | undefined, localeCode: string | undefined) {
   if (!localeCode) {
     return;
   }
@@ -70,14 +70,14 @@ function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
   }
 }
 
-class RangePicker extends React.Component<any, RangePickerState> {
+class RangePicker extends React.Component<RangePickerProps, RangePickerState> {
   static defaultProps = {
     allowClear: true,
     showToday: false,
     separator: '~',
   };
 
-  static getDerivedStateFromProps(nextProps: any, prevState: any) {
+  static getDerivedStateFromProps(nextProps: RangePickerProps, prevState: RangePickerState) {
     let state = null;
     if ('value' in nextProps) {
       const value = nextProps.value || [];
@@ -166,7 +166,9 @@ class RangePicker extends React.Component<any, RangePickerState> {
       value[1] = undefined;
     }
     const [start, end] = value;
-    props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
+    if (typeof props.onChange === 'function') {
+      props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
+    }
   };
 
   handleOpenChange = (open: boolean) => {
@@ -241,21 +243,24 @@ class RangePicker extends React.Component<any, RangePickerState> {
         {renderExtraFooter()}
       </div>
     ) : null;
-    const operations = Object.keys(ranges || {}).map(range => {
-      const value = ranges[range];
-      return (
-        <Tag
-          key={range}
-          prefixCls={tagPrefixCls}
-          color="blue"
-          onClick={() => this.handleRangeClick(value)}
-          onMouseEnter={() => this.setState({ hoverValue: value })}
-          onMouseLeave={this.handleRangeMouseLeave}
-        >
-          {range}
-        </Tag>
-      );
-    });
+    const operations =
+      ranges &&
+      Object.keys(ranges).map(range => {
+        const value = ranges[range];
+        const hoverValue = typeof value === 'function' ? value.call(this) : value;
+        return (
+          <Tag
+            key={range}
+            prefixCls={tagPrefixCls}
+            color="blue"
+            onClick={() => this.handleRangeClick(value)}
+            onMouseEnter={() => this.setState({ hoverValue })}
+            onMouseLeave={this.handleRangeMouseLeave}
+          >
+            {range}
+          </Tag>
+        );
+      });
     const rangeNode =
       operations && operations.length > 0 ? (
         <div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
@@ -280,6 +285,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
       ranges,
       onOk,
       locale,
+      // @ts-ignore
       localeCode,
       format,
       dateRender,
@@ -326,10 +332,12 @@ class RangePicker extends React.Component<any, RangePickerState> {
       calendarProps.mode = props.mode;
     }
 
-    const startPlaceholder =
-      'placeholder' in props ? props.placeholder[0] : locale.lang.rangePlaceholder[0];
-    const endPlaceholder =
-      'placeholder' in props ? props.placeholder[1] : locale.lang.rangePlaceholder[1];
+    const startPlaceholder = Array.isArray(props.placeholder)
+      ? props.placeholder[0]
+      : locale.lang.rangePlaceholder[0];
+    const endPlaceholder = Array.isArray(props.placeholder)
+      ? props.placeholder[1]
+      : locale.lang.rangePlaceholder[1];
 
     const calendar = (
       <RangeCalendar
@@ -405,7 +413,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
     return (
       <span
         ref={this.savePicker}
-        id={props.id}
+        id={typeof props.id === 'number' ? props.id.toString() : props.id}
         className={classNames(props.className, props.pickerClass)}
         style={{ ...style, ...pickerStyle }}
         tabIndex={props.disabled ? -1 : 0}

components/date-picker/interface.tsx

@@ -12,6 +12,8 @@ export interface PickerProps {
   disabled?: boolean;
   allowClear?: boolean;
   className?: string;
+  pickerClass?: string;
+  pickerInputClass?: string;
   suffixIcon?: React.ReactNode;
   style?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
@@ -24,6 +26,8 @@ export interface PickerProps {
   disabledDate?: (current: moment.Moment | undefined) => boolean;
   dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
   autoFocus?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: (e: React.SyntheticEvent) => void;
 }
 
 export interface SinglePickerProps {
@@ -56,7 +60,7 @@ export interface DatePickerProps extends PickerProps, SinglePickerProps {
 }
 
 export interface MonthPickerProps extends PickerProps, SinglePickerProps {
-  monthCellContentRender?: (date: moment.Moment, locale: any) => React.ReactNode
+  monthCellContentRender?: (date: moment.Moment, locale: any) => React.ReactNode;
 }
 
 export type RangePickerValue =
@@ -69,9 +73,11 @@ export type RangePickerPresetRange = RangePickerValue | (() => RangePickerValue)
 
 export interface RangePickerProps extends PickerProps {
   className?: string;
+  tagPrefixCls?: string;
   value?: RangePickerValue;
   defaultValue?: RangePickerValue;
   defaultPickerValue?: RangePickerValue;
+  timePicker?: React.ReactNode;
   onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   onOk?: (selectedTime: RangePickerPresetRange) => void;
@@ -93,6 +99,8 @@ export interface RangePickerProps extends PickerProps {
   };
   onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
   renderExtraFooter?: () => React.ReactNode;
+  onMouseEnter?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+  onMouseLeave?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 }
 
 export interface WeekPickerProps extends PickerProps, SinglePickerProps {

components/date-picker/utils.ts

@@ -3,7 +3,7 @@ import * as moment from 'moment';
 // eslint-disable-next-line import/prefer-default-export
 export function formatDate(
   value: moment.Moment | undefined | null,
-  format: string | string[],
+  format: string | string[] | undefined,
 ): string {
   if (!value) {
     return '';