1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
* 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);
};
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}}>
{!!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">开始时间</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">结束时间</List.Item>
</DatePicker>
</div>
);
}
}