##DatePicker latest update at 2016-10-08 author Able ####Des 仿material UI的时间插件,样式使用css-module处理 ####Require React,ReactDOM ####Useage

import React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'wheel-datepicker';
let root = document.getElementById('root');

class TestDatePicker extends React.Component {
    constructor() {
        super()
        this.state = {showDatePicker: false, date: ''}
    }

    render() {
        return (
            <div>
                <input type="text" 
                    value={this.state.date} 
                    onFocus={this.focusHandle.bind(this)}/>
                {this.state.showDatePicker ?
                    <DatePicker 
                        style={{position:'absolute'}}
                        customConfig={this.getConfig()}
                        defaultValue={this.state.date}
                        onConfirm={this.setValue.bind(this)}
                        onCancel={this.closeDatePicker.bind(this)}/> : ''}
            </div>
        )
    }

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

    getConfig() {
        return {
            minYear: 2000,
            maxYear: 2030,
            weekLabel: '星期',
            type:'month'
        }
    }

    closeDatePicker() {
        this.setState({showDatePicker: false});
    }

    setValue(date) {
        this.setState({date: date})
        this.closeDatePicker();
    }
}
ReactDOM.render(<TestDatePicker/>, root);

####Params minYear: 最小年份,默认当前年份-50, maxYear: 最大年份,默认当前年份+50, weekLabel: 周标签前缀,可取值:'周','星期',默认是'周', style:样式, type: 插件展现形式,可取值:'date','month','year',默认是'date' ###Update

1.修正了在ie下格式化的bug At 2016-11-16 By Able 2.增加月份选择和年份选择,在配置参数中传入type来区分 At 2017-01-05 By Able 3.修正插件样式以自适应于屏幕 At 2017-01-06 By Able