「react-mobile-datepicker」一個移動端的react日期選擇器組件

娣辯孩發布于2019-08-22 10:38 / 1529人閱讀

摘要：一個輕量級的移動端日期選擇器，不依賴于只有不到大小。可以通過上下滑動來設置年月日。在模擬的移動端可上下滑動觸發事件。使用例子組件屬性名稱類型默認描述是否彈出日期選擇框的主題包括根據指定的年，月，日格式顯示日期。

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 移動端的表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0