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

one_stop_public/libs/MobileDate.jsx

@@ -2,101 +2,124 @@
  * 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);
-		const value = props.value || [];
+  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()));
 
-		this.state = {
-			dates: value,
-		};
-	}
-	triggerChange = (changedValue) => {
-		// Should provide an event to pass value to Form.
-		const onChange = this.props.onChange;
+    } else if (dates.length === 1) {
+      if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
+        Toast.fail('结束时间必须在开始时间之后', 1);
+        return false;
+      }
 
-		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;
+      dates.push(moment(date.valueOf()));
+    } else {
+      if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
+        Toast.fail('结束时间必须在开始时间之后', 1);
+        return false;
+      }
 
-		if (dates.length == 0) {
-			dates.push(moment(date.valueOf()));
-		} else {
-			dates[0] = moment(date.valueOf());
-		}
+      dates[1] = moment(date.valueOf());
+    }
+    if (!('value' in this.props)) {
+      this.setState({dates});
+    }
+    this.triggerChange(dates);
+  };
 
-		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) {
-			dates.push(moment(date.valueOf()));
-		} else {
-			dates[1] = moment(date.valueOf());
-		}
-		if (!('value' in this.props)) {
-			this.setState({ dates });
-		}
-		this.triggerChange(dates);
-	};
-	render() {
-		let { dates } = this.state;
-		const { format } = this.props;
-		const startTime = dates.length > 0 ? dates[0].valueOf() : null;
-		const endTime = dates.length > 1 ? dates[1].valueOf() : null;
+  render() {
+    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 (
-			<div>
-				<DatePicker
-					// value={this.state.date}
-					extra={
-						<span style={{ fontSize: 14 }}>
+    return (
+      <div>
+        <DatePicker
+          // value={this.state.date}
+          extra={
+            <span style={{fontSize: 14}}>
 							{!!startTime
-								? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
-								: '请选择时间'}
+                ? 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">开始时间</List.Item>
-				</DatePicker>
-				<DatePicker
-					// value={this.state.date}
-					extra={
-						<span style={{ fontSize: 14 }}>
+          }
+          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">开始时间</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')
-								: '请选择时间'}
+                ? 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">结束时间</List.Item>
-				</DatePicker>
-			</div>
-		);
-	}
+          }
+          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">结束时间</List.Item>
+        </DatePicker>
+      </div>
+    );
+  }
 }