MobileDate.jsx

/**
 * 2019年10月23日
 * 移动端日期选择封装
 */
import React, {Component} from 'react';
import {DatePicker, List, Button, InputItem, Toast} from 'antd-mobile';
import moment from 'moment';

export default class MobileDate extends Component {
  constructor(props) {
    super(props);
    const value = props.value || [];

    this.state = {
      dates: value,
    };
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;

    if (onChange) {
      onChange(changedValue);
    }
  };

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState({dates: value});
    }
  }

  handelStartChange = (date) => {
    const {dates} = this.state;

    if (dates.length === 0) {
      dates.push(moment(date.valueOf()));
    } else {
      if(dates.length === 2){
        if (moment(date.valueOf()).isAfter(dates[1], 'second')) {
          Toast.fail('结束时间必须在开始时间之后', 1);
          return false;
        }
      }
      dates[0] = moment(date.valueOf());
    }

    if (!('value' in this.props)) {
      this.setState({dates});
    }
    this.triggerChange(dates);
  };
  handelEndChange = (date) => {
    const {dates} = this.state;

    if (dates.length === 0) {
      dates.push(null);
      dates.push(moment(date.valueOf()));

    } else if (dates.length === 1) {
      if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
        Toast.fail('结束时间必须在开始时间之后', 1);
        return false;
      }

      dates.push(moment(date.valueOf()));
    } else {
      if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
        Toast.fail('结束时间必须在开始时间之后', 1);
        return false;
      }

      dates[1] = moment(date.valueOf());
    }
    if (!('value' in this.props)) {
      this.setState({dates});
    }
    this.triggerChange(dates);
  };

  MustSpan = () => {
    const { required } = this.props;
    if(required){
      return <span style={{color: 'red'}}>* </span>;
    }else{
      return null;
    }
  };

  render() {
    let {dates} = this.state;
    const {format, required} = this.props;
    const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
    const endTime = dates.length > 1 ? dates[1].valueOf() : null;
    const MustSpan = this.MustSpan();
    return (
      <div>
        <DatePicker
          // value={this.state.date}
          extra={
            <span style={{fontSize: 14}}>
							{!!startTime
                ? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
                : '请选择时间'}
						</span>
          }
          locale={{okText: '确定', dismissText: '取消'}}
          value={!!startTime ? new Date(startTime) : null}
          format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
          onChange={(date) => this.handelStartChange(date)}>
          <List.Item arrow="horizontal">{MustSpan}开始时间</List.Item>
        </DatePicker>
        <DatePicker
          // value={this.state.date}
          extra={
            <span style={{fontSize: 14}}>
							{!!endTime
                ? moment(endTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
                : '请选择时间'}
						</span>
          }
          value={!!endTime ? new Date(endTime) : null}
          locale={{okText: '确定', dismissText: '取消'}}
          format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
          onChange={(date) => this.handelEndChange(date)}>
          <List.Item arrow="horizontal">{MustSpan}结束时间</List.Item>
        </DatePicker>
      </div>
    );
  }
}