22122 【起止时间组件】 没有做限制 结束时间不能小于开始时间 81721020124 284101

one_stop_public/libs/MobileDate.jsx

@@ -2,9 +2,10 @@
  * 2019年10月23日
  * 移动端日期选择封装
  */
-import React, { Component } from 'react';
-import { DatePicker, List, Button, InputItem, Modal } from 'antd-mobile';
+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);
@@ -14,6 +15,7 @@ export default class MobileDate extends Component {
       dates: value,
     };
   }
+
   triggerChange = (changedValue) => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
@@ -22,46 +24,67 @@ export default class MobileDate extends Component {
       onChange(changedValue);
     }
   };
+
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
     if ('value' in nextProps) {
       const value = nextProps.value;
-			this.setState({ dates: value });
+      this.setState({dates: value});
     }
   }
+
   handelStartChange = (date) => {
-		const { dates } = this.state;
+    const {dates} = this.state;
 
-		if (dates.length == 0) {
+    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.setState({dates});
     }
     this.triggerChange(dates);
   };
   handelEndChange = (date) => {
-		const { dates } = this.state;
-		if (dates.length == 0) {
+    const {dates} = this.state;
+
+    if (dates.length === 0) {
       dates.push(null);
       dates.push(moment(date.valueOf()));
-		} else if (dates.length == 1) {
+
+    } 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.setState({dates});
     }
     this.triggerChange(dates);
   };
+
   render() {
-		let { dates } = this.state;
-		const { format } = this.props;
-		const startTime = dates.length > 0 ? dates[0].valueOf() : null;
+    let {dates} = this.state;
+    const {format} = this.props;
+    const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
     const endTime = dates.length > 1 ? dates[1].valueOf() : null;
 
     return (
@@ -69,13 +92,13 @@ export default class MobileDate extends Component {
         <DatePicker
           // value={this.state.date}
           extra={
-						<span style={{ fontSize: 14 }}>
+            <span style={{fontSize: 14}}>
 							{!!startTime
                 ? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
                 : '请选择时间'}
 						</span>
           }
-					locale={{ okText: '确定', dismissText: '取消' }}
+          locale={{okText: '确定', dismissText: '取消'}}
           value={!!startTime ? new Date(startTime) : null}
           format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
           onChange={(date) => this.handelStartChange(date)}>
@@ -84,14 +107,14 @@ export default class MobileDate extends Component {
         <DatePicker
           // value={this.state.date}
           extra={
-						<span style={{ fontSize: 14 }}>
+            <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: '取消' }}
+          locale={{okText: '确定', dismissText: '取消'}}
           format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
           onChange={(date) => this.handelEndChange(date)}>
           <List.Item arrow="horizontal">结束时间</List.Item>