-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
159 lines (145 loc) · 6 KB
/
index.js
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/**
* @file melon demo Tabs
* @author cxtom(cxtom2008@gmail.com)
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Title from 'melon/Title';
import Calendar from '../src/Calendar';
import RangeCalendar from '../src/RangeCalendar';
import UnitCalendar from '../src/UnitCalendar';
import './index.styl';
class View extends React.Component {
constructor() {
super();
this.state = {
weekRange: [],
value: '2015-08-07',
monthRange: []
};
}
onChange(e) {
this.setState({value: e.value});
}
render() {
return (
<div>
<Title level={3}>Calendar</Title>
<div className="melon-row">
<div className="melon-column melon-column-8">
<Title level={5}>日期区间</Title>
<RangeCalendar
defaultValue={['2014-10-20', '2015-10-20']}
begin="2014-10-21"
end="2016-10-19"
size="xxs" />
</div>
<div className="melon-column melon-column-4">
<Title level={5}>日期区间</Title>
<RangeCalendar
begin="2014-10-21"
end="2018-10-19"
size="xxs" />
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>普通日历</Title>
<Calendar></Calendar>
</div>
<div className="melon-column melon-column-4">
<Title level={5}>限定区间</Title>
<Calendar
value="2015-09-01"
begin={new Date(2015, 7, 10)}
end={new Date(2015, 9, 28)}></Calendar>
2015-7-10 to 2015-9-28
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>fluid</Title>
<Calendar variants={['fluid']}></Calendar>
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>自动确定</Title>
<Calendar autoConfirm size="xs" />
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>被控制的控件</Title>
<Calendar
autoConfirm
value={this.state.value}
onChange={this.onChange.bind(this)} size="xs" />
</div>
<div className="melon-column melon-column-4">
{this.state.value}
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-11">
<Title level={5}>各种size</Title>
<Calendar size="xxs"></Calendar>
<Calendar size="xs"></Calendar>
<Calendar size="s"></Calendar>
<Calendar size="m"></Calendar>
<Calendar size="l"></Calendar>
<Calendar size="xl"></Calendar>
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>禁用</Title>
<Calendar disabled></Calendar>
</div>
<div className="melon-column melon-column-4">
<Title level={5}>只读</Title>
<Calendar begin={new Date(2014, 9, 10)} end={new Date(2015, 9, 10)} readOnly></Calendar>
</div>
</div>
<div className="melon-row">
<div className="melon-column melon-column-4">
<Title level={5}>日期区间</Title>
<UnitCalendar
size="xxs"
value={this.state.weekRange}
begin={new Date(2015, 10, 2)}
end={new Date(2016, 0, 31)}
unit="week"
onChange={({value}) => {
this.setState({
weekRange: value
});
}} />
</div>
<div className="melon-column melon-column-4">
<Title level={5}>日期区间</Title>
<UnitCalendar
size="xxs"
defaultValue={this.state.monthRange}
begin={new Date(2014, 10, 1)}
end={new Date(2015, 11, 1)}
unit="month" />
</div>
<div className="melon-column melon-column-4">
<Title level={5}>日期区间</Title>
<UnitCalendar
size="xxs"
defaultValue={this.state.yearRange}
begin={new Date(2012, 0, 1)}
end={new Date(2020, 4, 1)}
unit="year" />
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<View />,
document.getElementById('app')
);