antd 3.0 DatePicker 时间区间 日期禁用错误解决方案
import React, { PureComponent } from 'react';
import XMIcon from '@/components/PhoenixUI/XMIcon';
import { Col, Form, Row, Icon, Radio, Button, Tooltip, message, DatePicker } from 'antd';
import TrimInput from '@/components/PhoenixUI/TrimInput';
import moment from 'moment';
import AsyncTransfer from './AsyncTransfer';
import styles from '../less/index.less';
import { getSchoolData, getGoodsTree, addCoupon, editCoupon } from '../api';
const FormItem = Form.Item;
const itemLayout = {
labelCol: {
span: 24,
},
wrapperCol: {
span: 24,
},
labelAlign: 'left',
colon: false,
};
@Form.create()
class Edit extends PureComponent {
constructor(props) {
super(props);
this.state = {
endOpen: false,
};
}
disabledStartDate = startValue => {
const { form } = this.props
const endValue = form.getFieldValue('validity_end_time')
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > moment(endValue).endOf('day').valueOf() ;
};
disabledEndDate = endValue => {
const { form } = this.props
const startValue = form.getFieldValue('validity_start_time')
if (!endValue || !startValue) {
return false;
}
return endValue.valueOf() <= moment(startValue).startOf('day').valueOf();
};
range = (start, end) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
disableStartTime = dateTime => {
const { form } = this.props
const endValue = form.getFieldValue('validity_end_time');
if(moment(dateTime).isSame(moment(endValue), 'day')){
if(moment(dateTime).isSame(moment(endValue), "hour")){
return {
disabledHours: () => {
let ranges = this.range(0, 24);
const newRanges = ranges.filter(item=>{
return item >= moment(endValue).hour()+1
})
return newRanges;
},
disabledMinutes: () => [
...this.range( moment(endValue).minute()+1, 60),
]
};
} else {
return {
disabledHours: () => [
...this.range( moment(endValue).hour()+1, 24),
],
disabledMinutes: () => {
if (moment(dateTime).isSame(moment(endValue), "hour"))
return this.range(moment(endValue).minute()+1, 60);
return [];
}
}
}
}
}
disableEndTime = (dateTime ) => {
const { form } = this.props
const startValue = form.getFieldValue('validity_start_time');
if(moment(dateTime).isSame(moment(startValue), 'day')){
if(moment(dateTime).isSame(moment(startValue), "hour")){
return {
disabledHours: () => {
let ranges = this.range(0, 24);
const newRanges = ranges.filter(item=>{
return item < moment(startValue).hour()
})
return newRanges;
},
disabledMinutes: () => [
...this.range(0, moment(startValue).minute()),
]
};
} else {
return {
disabledHours: () => [
...this.range(0, moment(startValue).hour()),
],
disabledMinutes: () => {
if (moment(dateTime).isSame(moment(startValue), "hour"))
return this.range(0, moment(startValue).minute());
return [];
}
}
}
}
}
handleStartOpenChange = open => {
if (!open) {
this.setState({ endOpen: true });
}
};
handleEndOpenChange = open => {
this.setState({ endOpen: open });
};
render() {
const { cancelHandler, form, editCouponType, data } = this.props;
const { courseList, xmschoolList, loading, endOpen } = this.state;
const commonFlag = form.getFieldValue('type') || data.type - 0;
return (
<div className={styles.editCon}>
<div className={styles.editForm}>
<Form onSubmit={this.handleSearch} layout="inline">
<Row style={{ height: '84px' }}>
<Col className="requiredRight">
<FormItem
{...itemLayout}
required
label={
<span>
有效期
<Tooltip
placement="top"
title={
<div>若创建报名时间不在优惠券生效期间,则该报名无法选择本优惠券</div>
}
>
<Icon type="question-circle" style={{ marginLeft: '5px' }} />
</Tooltip>
</span>
}
>
<FormItem style={{marginRight: 0}}>
{form.getFieldDecorator('validity_start_time', {
initialValue: data?.validity_start_time ? moment(new Date(data?.validity_start_time * 1000), 'HH:mm:ss'): null,
rules: [{ required: true, message: '请选择生效时间' }],
})(
<DatePicker
disabledDate={this.disabledStartDate}
disabledTime={this.disableStartTime}
disabled={data?.status === 2 || data?.status === 3}
showTime={{ format: 'HH:mm'}}
format="YYYY-MM-DD HH:mm"
placeholder="生效时间"
showToday={false}
onOpenChange={this.handleStartOpenChange}
/>
)}
</FormItem>
<div style={{display: 'inline-block', margin: '0 1px', lineHeight: '2.5'}}>~</div>
<FormItem style={{marginRight: 0}}>
{form.getFieldDecorator('validity_end_time', {
initialValue: data?.validity_end_time ? moment(new Date(data?.validity_end_time * 1000), 'HH:mm:ss'): null,
rules: [{ required: true, message: '请选择失效时间' }],
})(
<DatePicker
disabledDate={this.disabledEndDate}
disabledTime={this.disableEndTime}
showTime={{ format: 'HH:mm'}}
format="YYYY-MM-DD HH:mm"
placeholder="失效时间"
showToday={false}
open={endOpen}
onOpenChange={this.handleEndOpenChange}
/>
)}
</FormItem>
</FormItem>
</Col>
</Row>
</div>
</div>
);
}
}
export default Edit;