MobileDate.jsx

/**
 * 2019年10月23日
 * 移动端日期选择封装
 */
/*
*  2022年8月29日 29143 h5/优秀学生干部管理/优秀学生干部申请，时间只要年/月；更改时间排版（20192601007，bdk@2022*$）
*
 */
import React, { Component } from 'react';
import { DatePicker, List, 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 => {
    console.log(changedValue);
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    // console.log(changedValue);
    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;
    }
  };

  formatDateShow = (v) => {

  };

  render() {
    let { dates } = this.state;
    const { format, showTime, otherProps,
     } = this.props;
    const mobileProps = otherProps?.mobileProps || {};
    const formatDiy = mobileProps.format || format || 'YYYY-MM-DD HH:mm:ss';
    let mode = 'datetime';
    if (!showTime) {
      mode = 'date';
    }
    const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
    const endTime = dates.length > 1 ? dates[1] && dates[1].valueOf() : null;
    const MustSpan = this.MustSpan();

    // console.log(startTime, endTime);

    return (
      <div>
        <DatePicker
          // value={this.state.date}
          extra={
            <span style={{ fontSize: 14 }}>
              {!!startTime
                ? moment(startTime).format(formatDiy)
                : '请选择时间'}
            </span>
          }
          locale={{
            okText: '确定',
            dismissText: '取消',
          }}
          value={!!startTime ? new Date(startTime) : null}
          mode={mode}
          onChange={date => this.handelStartChange(date)}
          {...mobileProps}
          format={(value) => {
            return moment(value).format(formatDiy);
          }}
        >
          <List.Item arrow="horizontal">{MustSpan}开始</List.Item>
        </DatePicker>
        <DatePicker
          // value={this.state.date}
          extra={
            <span style={{ fontSize: 14 }}>
              {!!endTime
                ? moment(endTime).format(formatDiy)
                : '请选择时间'}
            </span>
          }
          value={!!endTime ? new Date(endTime) : null}
          locale={{
            okText: '确定',
            dismissText: '取消',
          }}
          mode={mode}
          onChange={date => this.handelEndChange(date)}
          {...mobileProps}
          format={(value) => {
            return moment(value).format(formatDiy);
          }}
        >
          <List.Item arrow="horizontal">{MustSpan}结束</List.Item>
        </DatePicker>
      </div>
    );
  }
}