react-mobile-datepicker

一个轻量级的react移动端日期选择器，不依赖于moment.js,只有不到4k大小。

react-mobile-datepicker可以通过上下滑动来设置年、月、日。

• Github

• Demo

ps: demo在模拟的移动端可上下滑动触发touch事件。
这里先把它分享给大家，欢迎 star ，欢迎试用！

开始使用

使用 npm:

$ npm install react-mobile-datepicker --save

导入你想要的

下面的指导假设你已经使用ES2015构建安装，使用babel或webpack/browserify/gulp/grunt等。

// Using an ES6 transpiler like Babel
import  React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-mobile-datepicker';

使用例子

class App extends React.Component {
    state = {
        time: new Date(),isOpen: false,}

    handleClick = () => {
        this.setState({ isOpen: true });
    }

    handleCancel = () => {
        this.setState({ isOpen: false });
    }

    handleSelect = (time) => {
        this.setState({ time,isOpen: false });
    }

    render() {
        return (
            <div className="App">
                <a
                    className="select-btn"
                    onClick={this.handleClick}>
                    select time
                </a>
                <p className="select-time ">
                    {this.state.time}
                </p>

                <DatePicker
                    value={this.state.time}
                    isOpen={this.state.isOpen}
                    onSelect={this.handleSelect}
                    onCancel={this.handleCancel} />
            </div>
        );
    }
}


ReactDOM.render(<App />,document.getElementById('react-box'));

组件属性

最后，诚挚邀请大家pull requests代码。不断完善国内的前端大业。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!