5 |
6 | ### Installation
7 |
8 | Using [npm](https://www.npmjs.com/):
9 |
10 | $ npm install --save react-pickers
11 |
12 |
13 | Then with a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else:
14 |
15 |
16 | ```js
17 |
18 | // using an ES6 transpiler, like babel
19 | import { DatePicker, CityPicker } from 'react-pickers'
20 |
21 | // not using an ES6 transpiler
22 | var DatePicker = require('react-pickers').DatePicker
23 | var CityPicker = require('react-pickers').CityPicker
24 |
25 |
26 | ```
27 |
28 | ### What's it look like?
29 |
30 | ```js
31 | import React, { Component } from 'react';
32 | import { render } from 'react-dom';
33 |
34 | import 'react-pickers/lib/css/picker.css'
35 | import { CityPicker, DatePicker } from 'react-picker'
36 |
37 |
38 | import city2 from '../lib/city-data'
39 | import city3 from '../lib/city-data-3'
40 |
41 | class App extends Component{
42 |
43 | state = {
44 | showCityPicker: false,
45 | showCity2Picker:false,
46 | showCity3Picker:false,
47 | showDatePicker:false,
48 | showDatePicker2:false,
49 | singleData : [{
50 | value: 'ywj',
51 | text: '董事长 叶文洁'
52 | }, {
53 | value: 'aaa',
54 | text: '总经理 艾AA'
55 | }, {
56 | value: 'lj',
57 | text: '罗辑'
58 | }, {
59 | value: 'ymt',
60 | text: '云天明'
61 | }, {
62 | value: 'shq',
63 | text: '史强'
64 | }, {
65 | value: 'zhbh',
66 | text: '章北海'
67 | }, {
68 | value: 'zhy',
69 | text: '庄颜'
70 | }, {
71 | value: 'gyf',
72 | text: '关一帆'
73 | }, {
74 | value: 'zhz',
75 | text: '智子'
76 | }, {
77 | value: 'gezh',
78 | text: '歌者'
79 | }],
80 | city2: city2,
81 | city3: city3
82 | }
83 |
84 | showCityPicker(){
85 | this.setState({showCityPicker: true })
86 | }
87 |
88 | showCity2Picker(){
89 | this.setState({showCity2Picker: true })
90 | }
91 |
92 | showCity3Picker(){
93 | this.setState({showCity3Picker: true })
94 | }
95 |
96 | ok(){
97 | this.setState({showCityPicker: false })
98 | }
99 |
100 | cl(){
101 | this.setState({showCityPicker: false })
102 | }
103 |
104 |
105 | ok2(){
106 | this.setState({showCity2Picker: false })
107 | }
108 |
109 | cl2(){
110 | this.setState({showCity2Picker: false })
111 | }
112 |
113 | ok3(){
114 | this.setState({showCity3Picker: false })
115 | }
116 |
117 | cl3(){
118 | this.setState({showCity3Picker: false })
119 | }
120 |
121 | ok4(){
122 | this.setState({showDatePicker: false })
123 | }
124 |
125 | cl4(){
126 | this.setState({showDatePicker: false })
127 | }
128 |
129 | ok5(){
130 | this.setState({showDatePicker2: false })
131 | }
132 |
133 | cl5(){
134 | this.setState({showDatePicker2: false })
135 | }
136 |
137 | getData(ret){
138 | console.log(ret);
139 | }
140 |
141 | getData2(ret){
142 | console.log("你选择的城市是:" + ret[0].text + " " + ret[1].text);
143 | }
144 |
145 | getData3(ret){
146 | console.log("你选择的城市是:" + (ret[0] || {}).text + " " + (ret[1] || {}).text + " " + (ret[2] || {}).text);
147 | }
148 |
149 | getData4(ret){
150 | console.log('选择结果: ' + ret);
151 | }
152 |
153 | getData5(ret){
154 | console.log('选择结果: ' + ret);
155 | }
156 |
157 | selectDate(){
158 | this.setState({showDatePicker: true })
159 | }
160 |
161 | selectDate2(){
162 | this.setState({showDatePicker2: true })
163 | }
164 |
165 | render(){
166 | return (
167 |