react-calendar-own v1.0.6

react-calendar-own

• 基于 React 开发的日历插件；
• 没有引入第三方库，原生 js 封装， 文件小 性能不错；

效果

点击查看效果页面

样式不满意的话，根据自己需要修改css, 或者css覆盖就好了；

安装

npm install react-calendar-own --save-dev

引入方式

    import {CalendarSelect, Calendar} from 'react-calendar-own'
    import 'react-calendar-own/dist/index.css'

API

CalendarInput:

……

事件

……

Usage 使用案例

    // 引入组件
    import {CalendarSelect, Calendar} from 'react-calendar-own'
    import 'react-calendar-own/dist/index.css'

    class Module extends React.Component {

        constructor(props){
            super(props)

            this.state = {
                timeData:'2018-03-29',
                timeData2: '2018-03-29 08:33:22'
            }

            this.changeDate = this.changeDate.bind(this)
            this.changeDate2 = this.changeDate2.bind(this)
        }

        changeDate(data) {
            this.setState({
                timeData: data
            })
        }

        changeDate2(data) {
            this.setState({
                timeData2: data
            })
        }

        render() {
            return <div className="hello">
                Hello!
                <dl>
                    <dd>
                        {/*调用方式一*/}
                        <CalendarSelect time="2018-03-29"></CalendarSelect>
                    </dd>
                    <dd>
                        {/*调用方式二*/}
                        {<CalendarSelect time="2018-03-29 08:33:22" type={1}></CalendarSelect>}
                    </dd>
                    <dd>
                        {/*调用方式三*/}
                        <p>选中时间:{this.state.timeData}</p>
                        <Calendar time={this.state.timeData}
                                  onChange={this.changeDate} ></Calendar>
                    </dd>
                    <dd>
                        {/*调用方式四*/}
                        <p>选中时间:{this.state.timeData2}</p>
                        <Calendar time={this.state.timeData2}
                                  type={1}
                                  onChange={this.changeDate2} ></Calendar>
                    </dd>
                </dl>
            </div>
        }
    }

其他

🎉 觉得好用的话不要忘了 star 哦~ 🎉