diff --git a/examples/components/Form/Full.jsx b/examples/components/Form/Full.jsx index ba399d2b0..b9e5f4037 100644 --- a/examples/components/Form/Full.jsx +++ b/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' diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index f75cb967d..1e8729038 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -609,6 +609,7 @@ export class DatePicker extends React.Component { onChange={this.handleChange} requiredConfirm={!!(dateFormat && timeFormat)} dateFormat={dateFormat} + inputFormat={inputFormat} timeFormat={timeFormat} isValidDate={this.checkIsValidDate} viewMode={viewMode} diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx index 06c4118ca..354ef810f 100644 --- a/src/components/calendar/Calendar.tsx +++ b/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) => { diff --git a/src/components/calendar/MonthsView.tsx b/src/components/calendar/MonthsView.tsx index 8fb8d60c3..d6c65ac75 100644 --- a/src/components/calendar/MonthsView.tsx +++ b/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 (
- + {showYearHead&& - + { + canClick + ? + + : + + } + - + }
« - {this.props.viewDate.format(__('YYYY年'))} - + {this.props.viewDate.format(__('YYYY年'))} + + {this.props.viewDate.format(__('YYYY年'))} + »
{this.renderMonths()}