feat: support controlled panels for DatePicker and RangePicker, close: #5190 (#7049)

components/date-picker/RangePicker.tsx

@@ -191,13 +191,16 @@ export default class RangePicker extends React.Component<any, any> {
     let pickerChangeHandler = {
       onChange: this.handleChange,
     };
-    let calendarHandler: Object = {
+    let calendarProps: any = {
       onOk: this.handleChange,
     };
     if (props.timePicker) {
       pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
     } else {
-      calendarHandler = {};
+      calendarProps = {};
+    }
+    if ('mode' in props) {
+      calendarProps.mode = props.mode;
     }
 
     const startPlaceholder = ('placeholder' in props)
@@ -207,7 +210,7 @@ export default class RangePicker extends React.Component<any, any> {
 
     const calendar = (
       <RangeCalendar
-        {...calendarHandler}
+        {...calendarProps}
         format={format}
         prefixCls={prefixCls}
         className={calendarClassName}
@@ -222,6 +225,7 @@ export default class RangePicker extends React.Component<any, any> {
         onValueChange={this.handleShowDateChange}
         hoverValue={hoverValue}
         onHoverChange={this.handleHoverChange}
+        onPanelChange={props.onPanelChange}
         showToday={showToday}
       />
     );

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -368,6 +368,56 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
+<div>
+  <span
+    class="ant-calendar-picker"
+    style="width:154px;"
+  >
+    <div>
+      <input
+        class="ant-calendar-picker-input ant-input"
+        placeholder="请选择日期"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-picker-icon"
+      />
+    </div>
+  </span>
+  <br />
+  <span
+    class="ant-calendar-picker"
+  >
+    <span
+      class="ant-calendar-picker-input ant-input"
+    >
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="Start month"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-range-picker-separator"
+      >
+         ~ 
+      </span>
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="End month"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-picker-icon"
+      />
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
 <div>
   <span

components/date-picker/createPicker.tsx

@@ -86,23 +86,26 @@ export default function createPicker(TheCalendar): any {
         [`${prefixCls}-month`]: MonthCalendar === TheCalendar,
       });
 
-      let pickerChangeHandler: Object = {};
-      let calendarHandler: Object = {};
+      let pickerProps: Object = {};
+      let calendarProps: any = {};
       if (props.showTime) {
-        calendarHandler = {
+        calendarProps = {
           // fix https://github.com/ant-design/ant-design/issues/1902
           onSelect: this.handleChange,
         };
       } else {
-        pickerChangeHandler = {
+        pickerProps = {
           onChange: this.handleChange,
         };
       }
+      if ('mode' in props) {
+        calendarProps.mode = props.mode;
+      }
 
       warning(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');
       const calendar = (
         <TheCalendar
-          {...calendarHandler}
+          {...calendarProps}
           disabledDate={props.disabledDate}
           disabledTime={disabledTime}
           locale={locale.lang}
@@ -116,6 +119,7 @@ export default function createPicker(TheCalendar): any {
           showToday={props.showToday}
           monthCellContentRender={props.monthCellContentRender}
           renderFooter={this.renderFooter}
+          onPanelChange={props.onPanelChange}
         />
       );
 
@@ -160,7 +164,7 @@ export default function createPicker(TheCalendar): any {
         <span className={classNames(props.className, props.pickerClass)} style={style}>
           <RcDatePicker
             {...props}
-            {...pickerChangeHandler}
+            {...pickerProps}
             calendar={calendar}
             value={pickerValue}
             prefixCls={`${prefixCls}-picker-container`}

components/date-picker/demo/mode.md

@@ -0,0 +1,82 @@
+---
+order: 11
+title:
+  zh-CN: 受控面板
+  en-US: Controlled Panels
+---
+
+## zh-CN
+
+通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
+
+## en-US
+
+Determing which panel to show with `mode` and `onPanelChange`.
+
+````jsx
+import { DatePicker } from 'antd';
+const { RangePicker } = DatePicker;
+
+class ControlledDatePicker extends React.Component {
+  state = { mode: 'time' };
+
+  handleOpenChange = (open) => {
+    if (open) {
+      this.setState({ mode: 'time' });
+    }
+  }
+
+  handlePanelChange = (value, mode) => {
+    this.setState({ mode });
+  }
+
+  render() {
+    return (
+      <DatePicker
+        mode={this.state.mode}
+        showTime
+        onOpenChange={this.handleOpenChange}
+        onPanelChange={this.handlePanelChange}
+      />
+    );
+  }
+}
+
+class ControlledRangePicker extends React.Component {
+  state = {
+    mode: ['month', 'month'],
+    value: [],
+  };
+
+  handlePanelChange = (value, mode) => {
+    this.setState({
+      value,
+      mode: [
+        mode[0] === 'date' ? 'month' : mode[0],
+        mode[1] === 'date' ? 'month' : mode[1],
+      ],
+    });
+  }
+
+  render() {
+    const { value, mode } = this.state;
+    return (
+      <RangePicker
+        placeholder={['Start month', 'End month']}
+        format="YYYY-MM"
+        value={value}
+        mode={mode}
+        onPanelChange={this.handlePanelChange}
+      />
+    );
+  }
+}
+
+ReactDOM.render(
+  <div>
+    <ControlledDatePicker />
+    <br />
+    <ControlledRangePicker />
+  </div>
+, mountNode);
+````

components/date-picker/style/MonthPicker.less

@@ -1,7 +1,8 @@
 .@{calendar-prefix-cls}-month {
+  height: 248px;
   .@{calendar-prefix-cls}-month-panel,
   .@{calendar-prefix-cls}-year-panel {
     top: 0;
-    height: 248px;
+    height: 100%;
   }
 }

components/date-picker/style/RangePicker.less

@@ -113,7 +113,8 @@
   }
 
   .@{calendar-prefix-cls}-year-panel,
-  .@{calendar-prefix-cls}-month-panel {
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-decade-panel {
     top: @input-box-height;
   }
   .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {

package.json

@@ -50,7 +50,7 @@
     "omit.js": "^1.0.0",
     "prop-types": "^15.5.7",
     "rc-animate": "^2.3.6",
-    "rc-calendar": "~9.0.0",
+    "rc-calendar": "~9.1.0",
     "rc-cascader": "~0.11.3",
     "rc-checkbox": "~2.0.3",
     "rc-collapse": "~1.7.5",