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

娣辩孩发布于2019-08-22 10:38 / 1487人阅读

摘要：一个轻量级的移动端日期选择器，不依赖于只有不到大小。可以通过上下滑动来设置年月日。在模拟的移动端可上下滑动触发事件。使用例子组件属性名称类型默认描述是否弹出日期选择框的主题包括根据指定的年，月，日格式显示日期。

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 (
            
                
                    select time
                
                
                    {this.state.time}
                

                
            
        );
    }
}


ReactDOM.render(, 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代码。不断完善国内的前端大业。

GPU云服务器云服务器 asp日期选择器关于适配移动端的移动端的html js 移动端的表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90984.html

开发移动端react组件datepicker的总结与教训

摘要：背景前一阵，应公司的需求，需要一个在移动端运行的组件选择日期。思考过后变决定自己写一套移动端日期选择器组件。而应该从用户的角度出发，提高组件的易用性与灵活性。背景前一阵，应公司的需求，需要一个在移动端运行的react组件datepicker(选择日期)。搜索查找过后，我并没有找到一个既轻量级简洁又满足需求的组件。大部分现成的日期选择器都是相对于pc端开发的。思考过后变决定自己写一...

sewerganger 2019-08-20 11:05 评论0 收藏0
一言不合造轮子--撸一个ReactTimePicker

摘要：时间选择的表盘其实有两个，一个是小时的选择，另一个则是分钟的选择。也就是说，第一步选择小时，第二部选择分钟它是一个小时制的时间选择器。而则用于处理拖拽事件，标记着当前是否处于被拖拽状态。本文的源码全部位于github项目仓库react-times，如果有差异请以github为准。最终线上DEMO可见react-times github page 文章记录了一次创建独立React组件...

lifesimple 2019-08-22 10:38 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0