踩坑 antd 3.0 DatePicker 时间区间 日期禁用错误解决方案

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;