test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-04 04:59:17 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #1145 from 2betop/date-range

Browse Source 
优化日期范围值
This commit is contained in:
吴多益 2020-12-07 18:58:10 +08:00 committed by GitHub
commit 7ee124e1a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 530 additions and 491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/DateRangePicker.tsx
View File

@ -156,7 +156,7 @@ const availableRanges: {[propName: string]: any} = {
export class DateRangePicker extends React.Component<
DateRangePickerProps,
DateRangePickerState
> {
> {
static defaultProps = {
placeholder: '请选择日期范围',
format: 'X',
@ -164,8 +164,7 @@ export class DateRangePicker extends React.Component<
joinValues: true,
clearable: true,
delimiter: ',',
ranges:
'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
resetValue: '',
closeOnSelect: true,
overlayPlacement: 'auto'
@ -186,9 +185,7 @@ export class DateRangePicker extends React.Component<
(utc ? moment.utc(newValue.startDate) : newValue.startDate).format(
format
),
(utc ? moment.utc(newValue.endDate) : newValue.endDate).format(
format
)
(utc ? moment.utc(newValue.endDate) : newValue.endDate).format(format)
];
if (joinValues) {
@ -247,12 +244,7 @@ export class DateRangePicker extends React.Component<
this.state = {
isOpened: false,
isFocused: false,
...DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
)
...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
};
}
@ -262,12 +254,7 @@ export class DateRangePicker extends React.Component<
if (props.value !== value) {
this.setState({
...DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
)
...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
});
}
}
@ -357,43 +344,100 @@ export class DateRangePicker extends React.Component<
this.close();
}
filterDate(
date: moment.Moment,
originValue?: moment.Moment,
timeFormat?: string,
type: 'start' | 'end' = 'start'
): moment.Moment {
let value = date.clone();
// 没有初始值
if (!originValue) {
value = value[type === 'start' ? 'startOf' : 'endOf']('day');
} else if (typeof timeFormat === 'string' && /ss/.test(timeFormat)) {
value = value[type === 'start' ? 'startOf' : 'endOf']('second');
} else if (typeof timeFormat === 'string' && /mm/.test(timeFormat)) {
value = value[type === 'start' ? 'startOf' : 'endOf']('minute');
} else if (typeof timeFormat === 'string' && /HH/i.test(timeFormat)) {
value = value[type === 'start' ? 'startOf' : 'endOf']('hour');
} else {
value = value[type === 'start' ? 'startOf' : 'endOf']('day');
}
return value;
}
handleStartChange(newValue: moment.Moment) {
if (
this.state.startDate &&
!this.state.endDate &&
newValue.isAfter(this.state.startDate)
newValue.isSameOrAfter(this.state.startDate)
) {
return this.setState({
endDate: newValue.clone()
});
return this.setState(
{
endDate: this.filterDate(
newValue,
this.state.endDate,
this.props.timeFormat,
'end'
)
},
() => {
this.props.embed && this.confirm();
}
);
}
this.setState({
startDate: newValue.clone()
});
this.setState(
{
startDate: this.filterDate(
newValue,
this.state.startDate,
this.props.timeFormat,
'start'
)
},
() => {
this.props.embed && this.confirm();
}
);
}
handleEndChange(newValue: moment.Moment) {
newValue =
!this.state.endDate && !this.props.timeFormat
? newValue.endOf('day')
: newValue;
if (
this.state.endDate &&
!this.state.startDate &&
newValue.isBefore(this.state.endDate)
newValue.isSameOrBefore(this.state.endDate)
) {
return this.setState({
startDate: newValue.clone()
});
return this.setState(
{
startDate: this.filterDate(
newValue,
this.state.startDate,
this.props.timeFormat,
'start'
)
},
() => {
this.props.embed && this.confirm();
}
);
}
this.setState({
endDate: newValue.clone()
}, () => {
this.setState(
{
endDate: this.filterDate(
newValue,
this.state.endDate,
this.props.timeFormat,
'end'
)
},
() => {
this.props.embed && this.confirm();
});
}
);
}
selectRannge(range: PlainObject) {
@ -575,9 +619,7 @@ export class DateRangePicker extends React.Component<
<div key="button" className={`${ns}DateRangePicker-actions`}>
<a
className={cx('rdtBtn rdtBtnConfirm', {
'is-disabled':
!this.state.startDate || !this.state.endDate
'is-disabled': !this.state.startDate || !this.state.endDate
})}
onClick={this.confirm}
>
@ -672,10 +714,7 @@ export class DateRangePicker extends React.Component<
)}
{clearable && !disabled && value ? (
<a
className={`${ns}DateRangePicker-clear`}
onClick={this.clearValue}
>
<a className={`${ns}DateRangePicker-clear`} onClick={this.clearValue}>
<Icon icon="close" className="icon" />
</a>
) : null}
@ -707,6 +746,6 @@ export class DateRangePicker extends React.Component<
</div>
);
}
}
}
export default themeable(localeable(DateRangePicker));