「react-mobile-datepicker」一个移动端的react日期选择器组件

发布时间:2019-06-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了「react-mobile-datepicker」一个移动端的react日期选择器组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react-mobile-datepicker

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

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

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

「react-mobile-datepicker」一个移动端的react日期选择器组件

开始使用

使用 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'));

组件属性

名称 类型 默认 描述
isOpen Boolean false 是否弹出日期选择框
theme String default datepicker的主题, 包括 'default', 'dark', 'ios', 'android', 'android-dark'
dateFormat Array ['yyYY', 'M', 'D'] 根据指定的年,月,日格式显示日期。例如 ['YYYY年', 'MM月', 'DD日']
value Date new Date() 当前日期的值
min Date new Date(1970, 0, 1) 最小日期
max Date new Date(2050, 0, 1) 最大日期
onSelect Function () => {} 点击完成按钮后的回调函数, 当前的日期作为参数
onCancel Function () => {} 点击取消按钮后的回调函数

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

脚本宝典总结

以上是脚本宝典为你收集整理的「react-mobile-datepicker」一个移动端的react日期选择器组件全部内容,希望文章能够帮你解决「react-mobile-datepicker」一个移动端的react日期选择器组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。