MobileDate.jsx 4.3 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4
/**
 * 2019年10月23日
 * 移动端日期选择封装
 */
5 6 7 8
/*
*  2022年8月29日 29143 h5/优秀学生干部管理/优秀学生干部申请,时间只要年/月;更改时间排版(20192601007,bdk@2022*$)
*
 */
9 10
import React, { Component } from 'react';
import { DatePicker, List, Toast } from 'antd-mobile';
11
import moment from 'moment';
12

徐立's avatar
徐立 committed
13
export default class MobileDate extends Component {
14 15 16 17 18 19 20 21 22
  constructor(props) {
    super(props);
    const value = props.value || [];

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

23
  triggerChange = changedValue => {
24 25 26
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
27
      onChange([...changedValue]);
28 29 30 31 32 33 34
    }
  };

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

39 40
  handelStartChange = date => {
    const { dates } = this.state;
41 42 43 44

    if (dates.length === 0) {
      dates.push(moment(date.valueOf()));
    } else {
45
      if (dates.length === 2) {
46 47 48 49 50 51 52 53 54
        if (moment(date.valueOf()).isAfter(dates[1], 'second')) {
          Toast.fail('结束时间必须在开始时间之后', 1);
          return false;
        }
      }
      dates[0] = moment(date.valueOf());
    }

    if (!('value' in this.props)) {
55
      this.setState({ dates });
56 57 58
    }
    this.triggerChange(dates);
  };
钟是志's avatar
钟是志 committed
59

60 61
  handelEndChange = date => {
    const { dates } = this.state;
62 63 64 65 66 67 68 69 70 71 72 73 74 75
    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;
      }
76

77 78 79
      dates[1] = moment(date.valueOf());
    }
    if (!('value' in this.props)) {
80
      this.setState({ dates });
81 82 83
    }
    this.triggerChange(dates);
  };
84

85 86
  MustSpan = () => {
    const { required } = this.props;
87 88 89
    if (required) {
      return <span style={{ color: 'red' }}>* </span>;
    } else {
90 91 92 93
      return null;
    }
  };

94 95
  formatDateShow = (v) => {

钟是志's avatar
钟是志 committed
96
  };
97

98
  render() {
99
    let { dates } = this.state;
100 101 102 103
    const { format, showTime, otherProps,
     } = this.props;
    const mobileProps = otherProps?.mobileProps || {};
    const formatDiy = mobileProps.format || format || 'YYYY-MM-DD HH:mm:ss';
钟是志's avatar
钟是志 committed
104
    let mode = 'datetime';
105
    if (!showTime) {
钟是志's avatar
钟是志 committed
106 107
      mode = 'date';
    }
108
    const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
109
    const endTime = dates.length > 1 ? dates[1] && dates[1].valueOf() : null;
110
    const MustSpan = this.MustSpan();
钟是志's avatar
钟是志 committed
111

112

113 114 115 116 117
    return (
      <div>
        <DatePicker
          // value={this.state.date}
          extra={
118 119
            <span style={{ fontSize: 14 }}>
              {!!startTime
120
                ? moment(startTime).format(formatDiy)
121
                : '请选择时间'}
122
            </span>
123
          }
124 125 126 127
          locale={{
            okText: '确定',
            dismissText: '取消',
          }}
128
          value={!!startTime ? new Date(startTime) : null}
钟是志's avatar
钟是志 committed
129
          mode={mode}
130
          onChange={date => this.handelStartChange(date)}
131 132 133 134
          {...mobileProps}
          format={(value) => {
            return moment(value).format(formatDiy);
          }}
135
        >
136
          <List.Item arrow="horizontal">{MustSpan}开始</List.Item>
137 138 139 140
        </DatePicker>
        <DatePicker
          // value={this.state.date}
          extra={
141 142
            <span style={{ fontSize: 14 }}>
              {!!endTime
143
                ? moment(endTime).format(formatDiy)
144
                : '请选择时间'}
145
            </span>
146 147
          }
          value={!!endTime ? new Date(endTime) : null}
148 149 150 151
          locale={{
            okText: '确定',
            dismissText: '取消',
          }}
钟是志's avatar
钟是志 committed
152
          mode={mode}
153
          onChange={date => this.handelEndChange(date)}
154 155 156 157
          {...mobileProps}
          format={(value) => {
            return moment(value).format(formatDiy);
          }}
158
        >
159
          <List.Item arrow="horizontal">{MustSpan}结束</List.Item>
160 161 162 163
        </DatePicker>
      </div>
    );
  }
徐立's avatar
徐立 committed
164
}