react-pickers

react-picker

datapicker and citypicker base on MUI of picker

Installation

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:

 
// 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
 
 

What's it look like?

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 (
            <div>
                <h5 className="mui-content-padded">普通示例</h5>
                <button id='showUserPicker' className="mui-btn mui-btn-block" type='button' onClick={ this::this.showCityPicker  }>一级选择示例 ...</button>
                <CityPicker visible={ this.state.showCityPicker } setData={this.state.singleData} getData={ this::this.getData } confirm={ this::this.ok } cancel={ this::this.cl } />
                <h5 className="mui-content-padded">级联示例</h5>
                <button id='showCityPicker' className="mui-btn mui-btn-block" type='button' onClick={ this::this.showCity2Picker  }>二级联动示例 ...</button>
                <CityPicker visible={ this.state.showCity2Picker } layer='2' setData={this.state.city2} getData={ this::this.getData2 } confirm={ this::this.ok2 } cancel={ this::this.cl2 } />
                <div style={{ marginTop: '30px'}}></div>
                <button id='showCityPicker3' className="mui-btn mui-btn-block" type='button' onClick={ this::this.showCity3Picker  }>三级联动示例 ...</button>
                <CityPicker visible={ this.state.showCity3Picker } layer='3' setData={this.state.city3} getData={ this::this.getData3 } confirm={ this::this.ok3 } cancel={ this::this.cl3 } />
                <div className="mui-content-padded">
    				<h5 className="mui-content-padded">常规示例</h5>
    				<button id='demo1' className="btn mui-btn mui-btn-block" onClick={ this::this.selectDate }>选择日期时间 ...</button>
                    <DatePicker visible={ this.state.showDatePicker }  getData={ this::this.getData4 } confirm={ this::this.ok4 } cancel={ this::this.cl4 } />
    				<h5 className="mui-content-padded">设定年份区间</h5>
    				<button id='demo2' className="btn mui-btn mui-btn-block" onClick={ this::this.selectDate2 }>选择日期 ...</button>
                    <DatePicker visible={ this.state.showDatePicker2 } options={{"type":"date","beginYear":2014,"endYear":2016}}  getData={ this::this.getData5 } confirm={ this::this.ok5 } cancel={ this::this.cl5 } />
    			</div>
            </div>
        )
    }
}
 
 
render(
    <App />,
    document.querySelector('#root')
)
 

See more in the mui-picker

example

 
npm install
 
cd example
 
node server.js