react-picker

datapicker and citypicker base on MUI of picker

$3

Using npm:

$ npm install --save react-pickers

Then with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

``js

// using an ES6 transpiler, like babel
import { DatePicker, CityPicker } from 'react-pickers'

// not using an ES6 transpiler
var DatePicker = require('react-pickers').DatePicker
var CityPicker = require('react-pickers').CityPicker


`

$3

`js
import React, { Component } from 'react';
import { render } from 'react-dom';

import 'react-pickers/lib/css/picker.css'
import { CityPicker, DatePicker } from 'react-picker'


import city2 from '../lib/city-data'
import city3 from '../lib/city-data-3'

class App extends Component{

state = {
showCityPicker: false,
showCity2Picker:false,
showCity3Picker:false,
showDatePicker:false,
showDatePicker2:false,
singleData : [{
value: 'ywj',
text: '董事长 叶文洁'
}, {
value: 'aaa',
text: '总经理 艾AA'
}, {
value: 'lj',
text: '罗辑'
}, {
value: 'ymt',
text: '云天明'
}, {
value: 'shq',
text: '史强'
}, {
value: 'zhbh',
text: '章北海'
}, {
value: 'zhy',
text: '庄颜'
}, {
value: 'gyf',
text: '关一帆'
}, {
value: 'zhz',
text: '智子'
}, {
value: 'gezh',
text: '歌者'
}],
city2: city2,
city3: city3
}

showCityPicker(){
this.setState({showCityPicker: true })
}

showCity2Picker(){
this.setState({showCity2Picker: true })
}

showCity3Picker(){
this.setState({showCity3Picker: true })
}

ok(){
this.setState({showCityPicker: false })
}

cl(){
this.setState({showCityPicker: false })
}


ok2(){
this.setState({showCity2Picker: false })
}

cl2(){
this.setState({showCity2Picker: false })
}

ok3(){
this.setState({showCity3Picker: false })
}

cl3(){
this.setState({showCity3Picker: false })
}

ok4(){
this.setState({showDatePicker: false })
}

cl4(){
this.setState({showDatePicker: false })
}

ok5(){
this.setState({showDatePicker2: false })
}

cl5(){
this.setState({showDatePicker2: false })
}

getData(ret){
console.log(ret);
}

getData2(ret){
console.log("你选择的城市是:" + ret[0].text + " " + ret[1].text);
}

getData3(ret){
console.log("你选择的城市是:" + (ret[0] || {}).text + " " + (ret[1] || {}).text + " " + (ret[2] || {}).text);
}

getData4(ret){
console.log('选择结果: ' + ret);
}

getData5(ret){
console.log('选择结果: ' + ret);
}

selectDate(){
this.setState({showDatePicker: true })
}

selectDate2(){
this.setState({showDatePicker2: true })
}

render(){
return (


)
}
}

render(
,
document.querySelector('#root')
)

`

See more in the mui-picker




$3

`js

npm install

cd example

node server.js

``