mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: 添加通过inputFormat控制是否可以显示年份,以及年份是否可以点击出现年份选择列表
This commit is contained in:
parent
5180f7603b
commit
8075af69f2
@ -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'
|
||||
|
@ -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}
|
||||
|
@ -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) => {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user