feat: 添加通过inputFormat控制是否可以显示年份,以及年份是否可以点击出现年份选择列表

This commit is contained in:
徐历敏 2020-10-29 00:12:37 +08:00
parent 5180f7603b
commit 8075af69f2
4 changed files with 46 additions and 11 deletions

View File

@ -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'

View File

@ -576,6 +576,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}

View File

@ -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) => {

View File

@ -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,14 @@ export class CustomMonthsView extends MonthsView {
};
render() {
const __ = this.props.translate;
console.log('CustomMonthsView',this.props);
const showYearHead = this.props.inputFormat.toUpperCase() !== 'MM'
const canClick = this.props.inputFormat.toUpperCase() === 'YYYY-MM'
console.log('canClick',canClick);
return (
<div className="rdtMonths">
<table>
<thead>
{showYearHead&&<thead>
<tr>
<th
className="rdtPrev"
@ -48,14 +56,25 @@ export class CustomMonthsView extends MonthsView {
>
«
</th>
<th className="rdtSwitch">
{this.props.viewDate.format(__('YYYY年'))}
</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="rdtSwitch" onClick={this.props.showView('years')}>*/}
{/* {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>