@kdcloudjs/kdesign 1.6.24 → 1.6.25

package/es/date-picker/context.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { DateType, InnerLocale, RangeValue, TimeUnit } from './interface';
+import { IInnerPicker } from './date-picker';
 export declare type ContextOperationRefProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
     onClose?: () => void;
 };
+export declare type ISelectType = 'key' | 'mouse' | 'submit' | 'inner';
 export interface SingleContextProps {
     prefixCls: string;
     viewDate: DateType;
@@ -21,9 +23,11 @@ export interface SingleContextProps {
     seconds?: TimeUnit[];
     disabledTimePanel?: boolean;
     setViewDate: (date: DateType, index?: 0 | 1) => void;
-    onSelect: (date: DateType, type: 'key' | 'mouse' | 'submit') => void;
+    onSelect: (date: DateType, type: ISelectType) => void;
     onDateMouseEnter: (date: DateType) => void;
     onDateMouseLeave: (arg?: boolean) => void;
+    innerPicker: IInnerPicker;
+    setInnerPicker: (p: IInnerPicker) => void;
 }
 declare const Context: React.Context<SingleContextProps>;
 export default Context;

package/es/date-picker/date-panel.js

@@ -14,13 +14,15 @@ import isBoolean from 'lodash/isBoolean';
 import DateTime from './panel/date-time/date-time';
 
 function Panel(props) {
-  // console.log('props', props)
   var context = useContext(Context);
   var prefixCls = context.prefixCls,
       viewDate = context.viewDate,
       setViewDate = context.setViewDate,
       panelPosition = context.panelPosition,
-      locale = context.locale;
+      locale = context.locale,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
+  var isInInnerPicker = innerPicker !== undefined;
   var _props$picker = props.picker,
       picker = _props$picker === void 0 ? 'date' : _props$picker,
       format = props.format,
@@ -54,6 +56,14 @@ function Panel(props) {
   };
 
   var renderDatePanel = function renderDatePanel() {
+    if (isInInnerPicker) {
+      if (innerPicker === 'year') {
+        return renderYearPanel();
+      } else {
+        return renderMonthPanel();
+      }
+    }
+
     if (!showTime) {
       var dateProps = {
         picker: picker,
@@ -123,12 +133,30 @@ function Panel(props) {
     };
   };
 
+  var onHeaderYearClick = function onHeaderYearClick() {
+    if (picker === 'date') {
+      setInnerPicker('year');
+    }
+  };
+
+  var onHeaderMonthClick = function onHeaderMonthClick() {
+    if (picker === 'date') {
+      setInnerPicker('month');
+    }
+  };
+
   var renderDateHeader = function renderDateHeader() {
     var year = getYear(viewDate);
     var month = getMonth(viewDate) + 1;
     var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
     return {
-      children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, year + locale.year), /*#__PURE__*/React.createElement("span", null, month + locale.month)),
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-header-text-inner"),
+        onClick: onHeaderYearClick
+      }, year + locale.year), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-header-text-inner"),
+        onClick: onHeaderMonthClick
+      }, month + locale.month)),
       className: headerCls
     };
   };
@@ -136,7 +164,7 @@ function Panel(props) {
   var onSuperPrev = function onSuperPrev() {
     var date;
 
-    if (picker === 'year') {
+    if (picker === 'year' || innerPicker === 'year') {
       var _props$yearItemNumber3 = props.yearItemNumber,
           yearItemNumber = _props$yearItemNumber3 === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber3;
       date = addYears(viewDate, 0 - yearItemNumber);
@@ -150,7 +178,7 @@ function Panel(props) {
   var onSuperNext = function onSuperNext() {
     var date;
 
-    if (picker === 'year') {
+    if (picker === 'year' || innerPicker === 'year') {
       var _props$yearItemNumber4 = props.yearItemNumber,
           yearItemNumber = _props$yearItemNumber4 === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber4;
       var _viewDate = viewDate;
@@ -229,10 +257,10 @@ function Panel(props) {
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' ? undefined : onPrev,
-          onNext: panelPosition === 'left' ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onPrev: panelPosition === 'right' || isInInnerPicker ? undefined : onPrev,
+          onNext: panelPosition === 'left' || isInInnerPicker ? undefined : onNext,
+          onSuperPrev: panelPosition === 'right' || innerPicker === 'month' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' || innerPicker === 'month' ? undefined : onSuperNext
         };
         panel = renderDatePanel();
         break;

package/es/date-picker/date-picker.d.ts

@@ -5,6 +5,7 @@ import { BorderType, InputSiteType } from '../input/input';
 export interface PickerSharedProps extends React.AriaAttributes {
     dropdownClassName?: string;
     popupStyle?: React.CSSProperties;
+    popupRef?: React.Ref<any>;
     transitionName?: string;
     placeholder?: string;
     allowClear?: boolean;
@@ -47,5 +48,6 @@ export interface PickerTimeProps extends PickerSharedProps, Omit<OmitPanelProps<
     defaultOpenValue?: DateType;
 }
 export declare type PickerProps = PickerBaseProps | PickerDateProps | PickerTimeProps;
+export declare type IInnerPicker = undefined | 'year' | 'month';
 declare const DatePicker: React.ForwardRefExoticComponent<(Partial<PickerBaseProps> & React.RefAttributes<unknown>) | (Partial<PickerDateProps> & React.RefAttributes<unknown>) | (Partial<PickerTimeProps> & React.RefAttributes<unknown>)>;
 export default DatePicker;

package/es/date-picker/date-picker.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { useMergedState, useOnClickOutside } from '../_utils/hooks';
@@ -34,6 +34,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       className = datePickerProps.className,
       dropdownClassName = datePickerProps.dropdownClassName,
       popupStyle = datePickerProps.popupStyle,
+      popupRef = datePickerProps.popupRef,
       locale = datePickerProps.locale,
       inputReadOnly = datePickerProps.inputReadOnly,
       allowClear = datePickerProps.allowClear,
@@ -86,7 +87,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
 
   var panelDivRef = React.useRef(null);
   var inputDivRef = ref || /*#__PURE__*/React.createRef();
-  var popperRef = React.useRef(null);
+  var popperRef = popupRef || /*#__PURE__*/React.createRef();
   var inputRef = React.useRef(null);
   var isHourStepValid = 24 % hourStep === 0;
   var isMinuteStepValid = 60 % minuteStep === 0;
@@ -98,8 +99,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
 
   var datePickerLang = _extends({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }), locale || {}); // console.log(_format)
-  // 原始数据
+  }), locale || {}); // 原始数据
 
 
   var _useMergedState = useMergedState(null, {
@@ -229,6 +229,11 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       mergedMode = _useMergedState8[0],
       setInnerMode = _useMergedState8[1];
 
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerPicker = _useState2[0],
+      setInnerPicker = _useState2[1];
+
   useEffect(function () {
     setInnerMode(picker);
   }, [picker]);
@@ -280,13 +285,19 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   };
 
   var onContextSelect = function onContextSelect(date, type) {
-    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+    if (type === 'inner') {
       setViewDate(date);
-      triggerChange(date);
-      triggerOpen(false);
+      setSelectedValue(date);
+      setDateValue(date);
     } else {
-      setViewDate(date);
-      triggerChange(date);
+      if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+        setViewDate(date);
+        triggerChange(date);
+        triggerOpen(false);
+      } else {
+        setViewDate(date);
+        triggerChange(date);
+      }
     }
   };
 
@@ -374,9 +385,11 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         onSelect: onContextSelect,
         setViewDate: setViewDate,
         onDateMouseEnter: onEnter,
-        onDateMouseLeave: onLeave
+        onDateMouseLeave: onLeave,
+        innerPicker: innerPicker,
+        setInnerPicker: setInnerPicker
       }
-    }, panelNode, extraFooter || rangesNode || todayNode ? /*#__PURE__*/React.createElement("div", {
+    }, panelNode, (extraFooter || rangesNode || todayNode) && innerPicker === undefined ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(datePickerPrefixCls, "-footer")
     }, extraFooter, rangesNode, todayNode) : null);
   }

package/es/date-picker/panel/month/month.js

@@ -4,7 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { getMonth, newDate, getYear, setMonth, isAfter, isBefore, isSameMonth, getStartOfMonth } from '../../utils/date-fns';
+import { getMonth, newDate, getYear, setMonth, isAfter, isBefore, isSameMonth, getStartOfMonth, setYearOrMonthOfDate } from '../../utils/date-fns';
 import Context from '../../context';
 import useRangeCls from '../../hooks/use-range-cls';
 var monthsThreeColumns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
@@ -20,7 +20,9 @@ function Month(props) {
       rangeValue = context.rangeValue,
       panelPosition = context.panelPosition,
       hoverRangedValue = context.hoverRangedValue,
-      locale = context.locale;
+      locale = context.locale,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
   var disabledDate = props.disabledDate;
 
   var _dateValue;
@@ -89,8 +91,15 @@ function Month(props) {
   });
 
   var handleClick = function handleClick(date) {
-    if (!(disabledDate && disabledDate(date))) {
-      onSelect(date, 'mouse');
+    if (innerPicker === undefined) {
+      if (!(disabledDate && disabledDate(date))) {
+        onSelect(date, 'mouse');
+      }
+    } else {
+      //
+      var _viewDate = viewDate;
+      onSelect(setYearOrMonthOfDate(_viewDate, date, 'month'), 'inner');
+      setInnerPicker(undefined);
     }
   };
 

package/es/date-picker/panel/year/year.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { DateType } from '../../interface';
+import { DateType, PickerMode } from '../../interface';
 export interface YearProps {
     yearItemNumber: number;
     minDate?: DateType;
     maxDate?: DateType;
     disabledDate?: (date: DateType) => boolean;
+    picker?: PickerMode;
 }
 declare function Year(props: YearProps): JSX.Element;
 export default Year;

package/es/date-picker/panel/year/year.js

@@ -3,8 +3,9 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import Context from '../../context';
-import { getYearsPeriod, getYear, newDate, setYear, isAfter, getStartOfYear, isSameYear, isBefore } from '../../utils/date-fns';
+import { getYearsPeriod, getYear, newDate, setYear, isAfter, getStartOfYear, isSameYear, isBefore, setYearOrMonthOfDate } from '../../utils/date-fns';
 import useRangeCls from '../../hooks/use-range-cls';
+import { getClosingViewDate } from '../../utils';
 
 function Year(props) {
   var context = useContext(Context);
@@ -16,9 +17,13 @@ function Year(props) {
       onSelect = context.onSelect,
       rangeValue = context.rangeValue,
       panelPosition = context.panelPosition,
-      hoverRangedValue = context.hoverRangedValue;
+      hoverRangedValue = context.hoverRangedValue,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
   var yearItemNumber = props.yearItemNumber,
-      disabledDate = props.disabledDate;
+      disabledDate = props.disabledDate,
+      _props$picker = props.picker,
+      picker = _props$picker === void 0 ? 'date' : _props$picker;
 
   var _dateValue;
 
@@ -86,8 +91,21 @@ function Year(props) {
   });
 
   var handleClick = function handleClick(date) {
-    if (!(disabledDate && disabledDate(date))) {
-      onSelect(date, 'mouse');
+    if (innerPicker === undefined) {
+      if (!(disabledDate && disabledDate(date))) {
+        onSelect(date, 'mouse');
+      }
+    } else {
+      //
+      var _viewDate = viewDate;
+
+      if (panelPosition) {
+        _viewDate = getClosingViewDate(viewDate, picker, -1);
+      } // date = addYears(_viewDate, 1)
+
+
+      onSelect(setYearOrMonthOfDate(_viewDate, date), 'inner');
+      setInnerPicker(undefined);
     }
   };
 

package/es/date-picker/range-picker.d.ts

@@ -29,6 +29,8 @@ export interface RangePickerSharedProps {
     dateRender?: RangeDateRender;
     panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupRef?: React.Ref<any>;
+    popupStyle?: React.CSSProperties;
 }
 declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTimePanel' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange' | 'onOk' | 'dateRender'>;
 export declare type RangeShowTimeObject = Omit<SharedTimeProps, 'defaultValue'> & {

package/es/date-picker/range-picker.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import isSameWeek from 'date-fns/isSameWeek';
 import ConfigContext from '../config-provider/ConfigContext';
 import { useMergedState, useOnClickOutside } from '../_utils/hooks';
@@ -85,6 +85,8 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       allowEmpty = datePickerProps.allowEmpty,
       className = datePickerProps.className,
       style = datePickerProps.style,
+      popupStyle = datePickerProps.popupStyle,
+      popupRef = datePickerProps.popupRef,
       borderType = datePickerProps.borderType,
       separator = datePickerProps.separator,
       ranges = datePickerProps.ranges,
@@ -130,7 +132,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
   var separatorRef = React.useRef(null);
   var startInputRef = React.useRef(null);
   var endInputRef = React.useRef(null);
-  var popperRef = React.useRef(null);
+  var popperRef = popupRef || /*#__PURE__*/React.createRef();
   var openRecordsRef = React.useRef({});
   var mergedDisabled = React.useMemo(function () {
     if (Array.isArray(disabled)) {
@@ -346,6 +348,11 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       mergedModes = _useMergedState10[0],
       setInnerModes = _useMergedState10[1];
 
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerPicker = _useState2[0],
+      setInnerPicker = _useState2[1];
+
   useEffect(function () {
     setInnerModes([picker, picker]);
   }, [picker]); // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
@@ -474,8 +481,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     var values = updateValues(selectedValue, date, mergedActivePickerIndex);
 
     if (type === 'submit' || type !== 'key' && !needConfirmButton) {
-      // triggerChange will also update selected values
-      triggerChange(values, mergedActivePickerIndex); // clear hover value style
+      triggerChange(values, mergedActivePickerIndex);
 
       if (mergedActivePickerIndex === 0) {
         onStartLeave();
@@ -581,7 +587,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, renderPanel());
       var rightPanel = /*#__PURE__*/React.createElement(Context.Provider, {
@@ -596,7 +604,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, renderPanel());
       panels = /*#__PURE__*/React.createElement("div", {
@@ -621,7 +631,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, /*#__PURE__*/React.createElement(Panel, _extends({}, datePickerProps, {
         disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate
@@ -763,7 +775,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     trigger: 'click',
     prefixCls: "".concat(datePickerPrefixCls, "-panel"),
     arrow: false,
-    popperStyle: style,
+    popperStyle: popupStyle,
     visible: mergedOpen,
     placement: 'bottomLeft',
     getPopupContainer: getPopupContainer

package/es/date-picker/style/index.css

@@ -745,6 +745,15 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kd-date-picker-panel .kd-date-picker-header-text-inner {
+  cursor: pointer;
+}
+.kd-date-picker-panel .kd-date-picker-header-text-inner:hover {
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker-panel .kd-date-picker-header-text-inner:nth-child(2) {
+  margin-left: 13px;
+}
 .kd-date-picker-panel .kd-date-picker-time-header,
 .kd-date-picker-panel .kd-date-picker-header {
   height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);

package/es/date-picker/style/index.less

@@ -627,6 +627,17 @@
 
     &-text {
       flex: 1;
+
+      &-inner {
+        cursor: pointer;
+
+        &:hover {
+          color: @date-color-background-checked;
+        }
+        &:nth-child(2) {
+          margin-left: 13px;
+        }
+      }
     }
   }
 

package/es/date-picker/utils/date-fns.d.ts

@@ -84,3 +84,4 @@ export declare function getYearsPeriod(date: DateType, yearItemNumber: number):
     endPeriod: number;
 };
 export declare function getLowerBoundTime(hour: number, minute: number, second: number, hourStep: number, minuteStep: number, secondStep: number): [number, number, number];
+export declare const setYearOrMonthOfDate: (date1: DateType, date2: DateType, type?: string) => Date;

package/es/date-picker/utils/date-fns.js

@@ -1,5 +1,6 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import isDate from 'date-fns/isDate';
 import isValidDate from 'date-fns/isValid';
 import format from 'date-fns/format';
@@ -294,4 +295,26 @@ export function getLowerBoundTime(hour, minute, second, hourStep, minuteStep, se
 
   var lowerBoundSecond = Math.floor(second / secondStep) * secondStep;
   return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond];
-}
+}
+export var setYearOrMonthOfDate = function setYearOrMonthOfDate(date1, date2) {
+  var _context, _context2, _context3, _context4, _context5;
+
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'year';
+  var y = new Date(date1).getFullYear();
+
+  if (type === 'year') {
+    y = new Date(date2).getFullYear();
+  }
+
+  var m = new Date(date1 || date2).getMonth() + 1;
+
+  if (type === 'month') {
+    m = new Date(date2).getMonth() + 1;
+  }
+
+  var d = new Date(date1 || date2).getDate();
+  var h = new Date(date1 || date2).getHours();
+  var mi = new Date(date1 || date2).getMinutes();
+  var s = new Date(date1 || date2).getSeconds();
+  return new Date(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(y, "-")).call(_context5, m, "-")).call(_context4, d, " ")).call(_context3, h, ":")).call(_context2, mi, ":")).call(_context, s));
+};

package/lib/date-picker/context.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { DateType, InnerLocale, RangeValue, TimeUnit } from './interface';
+import { IInnerPicker } from './date-picker';
 export declare type ContextOperationRefProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
     onClose?: () => void;
 };
+export declare type ISelectType = 'key' | 'mouse' | 'submit' | 'inner';
 export interface SingleContextProps {
     prefixCls: string;
     viewDate: DateType;
@@ -21,9 +23,11 @@ export interface SingleContextProps {
     seconds?: TimeUnit[];
     disabledTimePanel?: boolean;
     setViewDate: (date: DateType, index?: 0 | 1) => void;
-    onSelect: (date: DateType, type: 'key' | 'mouse' | 'submit') => void;
+    onSelect: (date: DateType, type: ISelectType) => void;
     onDateMouseEnter: (date: DateType) => void;
     onDateMouseLeave: (arg?: boolean) => void;
+    innerPicker: IInnerPicker;
+    setInnerPicker: (p: IInnerPicker) => void;
 }
 declare const Context: React.Context<SingleContextProps>;
 export default Context;

package/lib/date-picker/date-panel.js

@@ -46,13 +46,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function Panel(props) {
-  // console.log('props', props)
   var context = (0, _react.useContext)(_context.default);
   var prefixCls = context.prefixCls,
       viewDate = context.viewDate,
       setViewDate = context.setViewDate,
       panelPosition = context.panelPosition,
-      locale = context.locale;
+      locale = context.locale,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
+  var isInInnerPicker = innerPicker !== undefined;
   var _props$picker = props.picker,
       picker = _props$picker === void 0 ? 'date' : _props$picker,
       format = props.format,
@@ -86,6 +88,14 @@ function Panel(props) {
   };
 
   var renderDatePanel = function renderDatePanel() {
+    if (isInInnerPicker) {
+      if (innerPicker === 'year') {
+        return renderYearPanel();
+      } else {
+        return renderMonthPanel();
+      }
+    }
+
     if (!showTime) {
       var dateProps = {
         picker: picker,
@@ -155,12 +165,30 @@ function Panel(props) {
     };
   };
 
+  var onHeaderYearClick = function onHeaderYearClick() {
+    if (picker === 'date') {
+      setInnerPicker('year');
+    }
+  };
+
+  var onHeaderMonthClick = function onHeaderMonthClick() {
+    if (picker === 'date') {
+      setInnerPicker('month');
+    }
+  };
+
   var renderDateHeader = function renderDateHeader() {
     var year = (0, _dateFns.getYear)(viewDate);
     var month = (0, _dateFns.getMonth)(viewDate) + 1;
     var headerCls = (0, _classnames.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
     return {
-      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, year + locale.year), /*#__PURE__*/_react.default.createElement("span", null, month + locale.month)),
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(prefixCls, "-header-text-inner"),
+        onClick: onHeaderYearClick
+      }, year + locale.year), /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(prefixCls, "-header-text-inner"),
+        onClick: onHeaderMonthClick
+      }, month + locale.month)),
       className: headerCls
     };
   };
@@ -168,7 +196,7 @@ function Panel(props) {
   var onSuperPrev = function onSuperPrev() {
     var date;
 
-    if (picker === 'year') {
+    if (picker === 'year' || innerPicker === 'year') {
       var _props$yearItemNumber3 = props.yearItemNumber,
           yearItemNumber = _props$yearItemNumber3 === void 0 ? _dateFns.DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber3;
       date = (0, _dateFns.addYears)(viewDate, 0 - yearItemNumber);
@@ -182,7 +210,7 @@ function Panel(props) {
   var onSuperNext = function onSuperNext() {
     var date;
 
-    if (picker === 'year') {
+    if (picker === 'year' || innerPicker === 'year') {
       var _props$yearItemNumber4 = props.yearItemNumber,
           yearItemNumber = _props$yearItemNumber4 === void 0 ? _dateFns.DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber4;
       var _viewDate = viewDate;
@@ -261,10 +289,10 @@ function Panel(props) {
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' ? undefined : onPrev,
-          onNext: panelPosition === 'left' ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onPrev: panelPosition === 'right' || isInInnerPicker ? undefined : onPrev,
+          onNext: panelPosition === 'left' || isInInnerPicker ? undefined : onNext,
+          onSuperPrev: panelPosition === 'right' || innerPicker === 'month' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' || innerPicker === 'month' ? undefined : onSuperNext
         };
         panel = renderDatePanel();
         break;

package/lib/date-picker/date-picker.d.ts

@@ -5,6 +5,7 @@ import { BorderType, InputSiteType } from '../input/input';
 export interface PickerSharedProps extends React.AriaAttributes {
     dropdownClassName?: string;
     popupStyle?: React.CSSProperties;
+    popupRef?: React.Ref<any>;
     transitionName?: string;
     placeholder?: string;
     allowClear?: boolean;
@@ -47,5 +48,6 @@ export interface PickerTimeProps extends PickerSharedProps, Omit<OmitPanelProps<
     defaultOpenValue?: DateType;
 }
 export declare type PickerProps = PickerBaseProps | PickerDateProps | PickerTimeProps;
+export declare type IInnerPicker = undefined | 'year' | 'month';
 declare const DatePicker: React.ForwardRefExoticComponent<(Partial<PickerBaseProps> & React.RefAttributes<unknown>) | (Partial<PickerDateProps> & React.RefAttributes<unknown>) | (Partial<PickerTimeProps> & React.RefAttributes<unknown>)>;
 export default DatePicker;