Merge pull request #1018 from 330595524/master

针对月份选择器，添加年份可点列表功能

examples/components/Form/Full.jsx

@@ -577,12 +577,24 @@ export default {
         {
           type: 'divider'
         },
+        {
+          type: 'month',
+          name: 'year-month',
+          inline: true,
+          label: '年月',
+          "value": "-1month",
+          "inputFormat": "YYYY-MM"
+        },
+        {
+          type: 'divider'
+        },
         {
           type: 'month',
           name: 'month',
           inline: true,
           label: '月份',
-          "value": "-1month"
+          "value": "-1month",
+          "inputFormat": "MM"
         },
         {
           type: 'divider'

src/components/DatePicker.tsx

@@ -609,6 +609,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                 onChange={this.handleChange}
                 requiredConfirm={!!(dateFormat && timeFormat)}
                 dateFormat={dateFormat}
+                inputFormat={inputFormat}
                 timeFormat={timeFormat}
                 isValidDate={this.checkIsValidDate}
                 viewMode={viewMode}

src/components/calendar/Calendar.tsx

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import moment from 'moment';
 
 interface BaseDatePickerProps extends ReactDatePicker.DatetimepickerProps {
+  inputFormat: string;
   onViewModeChange?: (type: string) => void;
   requiredConfirm?: boolean;
   onClose?: () => void;
@@ -29,6 +30,7 @@ class BaseDatePicker extends ReactDatePicker {
       props.setDateTimeState = this.setState.bind(this);
 
       [
+        'inputFormat',
         'onChange',
         'onClose',
         'requiredConfirm',
@@ -43,9 +45,10 @@ class BaseDatePicker extends ReactDatePicker {
   })((this as any).getComponentProps);
 
   setDate = (type: 'month' | 'year') => {
+    const currentShould = this.props.viewMode === 'months' && this.props.inputFormat.toUpperCase() !== 'MM'
     const nextViews = {
-      month: 'days',
-      year: 'days'
+      month: currentShould?'months':'days',
+      year: currentShould?'months':'days'
     };
 
     return (e: any) => {

src/components/calendar/MonthsView.tsx

@@ -2,7 +2,11 @@
 import MonthsView from 'react-datetime/src/MonthsView';
 import moment from 'moment';
 import React from 'react';
-import {LocaleProps, localeable} from '../../locale';
+import {LocaleProps, localeable, TranslateFn} from '../../locale';
+
+export interface OtherProps {
+  inputFormat: string;
+}
 
 export class CustomMonthsView extends MonthsView {
   props: {
@@ -17,7 +21,8 @@ export class CustomMonthsView extends MonthsView {
       type: string,
       toSelected?: moment.Moment
     ) => () => void;
-  } & LocaleProps;
+    showView: (view: string) => () => void;
+  } & LocaleProps & OtherProps;
   renderMonths: () => JSX.Element;
   renderMonth = (props: any, month: number) => {
     var localMoment = this.props.viewDate;
@@ -36,11 +41,12 @@ export class CustomMonthsView extends MonthsView {
   };
   render() {
     const __ = this.props.translate;
-
+    const showYearHead = this.props.inputFormat.toUpperCase() !== 'MM'
+    const canClick = this.props.inputFormat.toUpperCase() === 'YYYY-MM'
     return (
       <div className="rdtMonths">
         <table>
-          <thead>
+          {showYearHead&&<thead>
             <tr>
               <th
                 className="rdtPrev"
@@ -48,14 +54,23 @@ export class CustomMonthsView extends MonthsView {
               >
                 «
               </th>
+              {
+                canClick
+                  ?
+                <th className="rdtSwitch" onClick={this.props.showView('years')}>
+                  {this.props.viewDate.format(__('YYYY年'))}
+                </th>
+                  :
                 <th className="rdtSwitch">
                   {this.props.viewDate.format(__('YYYY年'))}
                 </th>
+              }
+
               <th className="rdtNext" onClick={this.props.addTime(1, 'years')}>
                 »
               </th>
             </tr>
-          </thead>
+          </thead>}
         </table>
         <table>
           <tbody>{this.renderMonths()}</tbody>