//moment().dayOfYear()一年中的第几天
1 import { DatePicker } from 'antd';
2
3 class DateRange extends React.Component {
4 state = {
5 endOpen: false,
6 formValues: {
7 strDate: null,
8 endDate: null
9 },
10 };
11
12 disabledStartDate = strDate => {
13 const { formValues: {endDate} } = this.state;
14 if (!strDate || !endDate) {
15 return false;
16 }
17 return moment(strDate).dayOfYear() !== moment(endDate).dayOfYear();
18 };
19
20 disabledEndDate = endDate => {
21 const { formValues:{strDate} } = this.state;
22 if (!endDate || !strDate) {
23 return false;
24 }
25 return moment(strDate).dayOfYear() !== moment(endDate).dayOfYear();
26 };
27
28 onChange = (field, value) => {
29 this.setState({
30 formValues:{...this.state.formValues,[field]: value},
31 });
32 };
33
34 onStartChange = value => {
35 this.onChange('strDate', value);
36 };
37
38 onEndChange = value => {
39 this.onChange('endDate', value);
40 };
41
42 handleStartOpenChange = open => {
43 if (!open) {
44 this.setState({ endOpen: true });
45 }
46 };
47
48 handleEndOpenChange = open => {
49 this.setState({ endOpen: open });
50 };
51
52 render() {
53 const { formValues: { strDate, endDate }, endOpen } = this.state;
54 return (
55 <div>
56 <DatePicker
57 disabledDate={this.disabledStartDate}
58 showTime
59 format="YYYY-MM-DD HH:mm:ss"
60 value={startValue}
61 placeholder="Start"
62 onChange={this.onStartChange}
63 onOpenChange={this.handleStartOpenChange}
64 />
65 <DatePicker
66 disabledDate={this.disabledEndDate}
67 showTime
68 format="YYYY-MM-DD HH:mm:ss"
69 value={endValue}
70 placeholder="End"
71 onChange={this.onEndChange}
72 open={endOpen}
73 onOpenChange={this.handleEndOpenChange}
74 />
75 </div>
76 );
77 }
78 }
79
80 ReactDOM.render(<DateRange />, mountNode);
