成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

「react-mobile-datepicker」一個(gè)移動(dòng)端的react日期選擇器組件

娣辯孩 / 1526人閱讀

摘要：一個(gè)輕量級(jí)的移動(dòng)端日期選擇器，不依賴(lài)于只有不到大小。可以通過(guò)上下滑動(dòng)來(lái)設(shè)置年月日。在模擬的移動(dòng)端可上下滑動(dòng)觸發(fā)事件。使用例子組件屬性名稱(chēng)類(lèi)型默認(rèn)描述是否彈出日期選擇框的主題包括根據(jù)指定的年，月，日格式顯示日期。

react-mobile-datepicker

一個(gè)輕量級(jí)的react移動(dòng)端日期選擇器，不依賴(lài)于moment.js, 只有不到4k大小。

react-mobile-datepicker可以通過(guò)上下滑動(dòng)來(lái)設(shè)置年、月、日。

Github

Demo

ps: demo在模擬的移動(dòng)端可上下滑動(dòng)觸發(fā)touch事件。
這里先把它分享給大家，歡迎 star ，歡迎試用！

開(kāi)始使用

使用 npm:

$ npm install react-mobile-datepicker --save
導(dǎo)入你想要的

下面的指導(dǎo)假設(shè)你已經(jīng)使用ES2015構(gòu)建安裝，使用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"));
組件屬性
名稱(chēng) 類(lèi)型 默認(rèn) 描述
isOpen Boolean false 是否彈出日期選擇框
theme String default datepicker的主題, 包括 "default", "dark", "ios", "android", "android-dark"
dateFormat Array ["YYYY", "M", "D"] 根據(jù)指定的年，月，日格式顯示日期。例如 ["YYYY年", "MM月", "DD日"]
value Date new Date() 當(dāng)前日期的值
min Date new Date(1970, 0, 1) 最小日期
max Date new Date(2050, 0, 1) 最大日期
onSelect Function () => {} 點(diǎn)擊完成按鈕后的回調(diào)函數(shù), 當(dāng)前的日期作為參數(shù)
onCancel Function () => {} 點(diǎn)擊取消按鈕后的回調(diào)函數(shù)

最后，誠(chéng)摯邀請(qǐng)大家pull requests代碼。不斷完善國(guó)內(nèi)的前端大業(yè)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90984.html

相關(guān)文章

  • 開(kāi)發(fā)移動(dòng)端react組件datepicker的總結(jié)與教訓(xùn)

    摘要：背景前一陣，應(yīng)公司的需求，需要一個(gè)在移動(dòng)端運(yùn)行的組件選擇日期。思考過(guò)后變決定自己寫(xiě)一套移動(dòng)端日期選擇器組件。而應(yīng)該從用戶的角度出發(fā)，提高組件的易用性與靈活性。 背景 前一陣，應(yīng)公司的需求，需要一個(gè)在移動(dòng)端運(yùn)行的react組件datepicker(選擇日期)。搜索查找過(guò)后，我并沒(méi)有找到一個(gè)既輕量級(jí)簡(jiǎn)潔又滿足需求的組件。大部分現(xiàn)成的日期選擇器都是相對(duì)于pc端開(kāi)發(fā)的。 思考過(guò)后變決定自己寫(xiě)一...

    sewerganger 評(píng)論0 收藏0

  • 一言不合造輪子--擼一個(gè)ReactTimePicker

    摘要：時(shí)間選擇的表盤(pán)其實(shí)有兩個(gè)，一個(gè)是小時(shí)的選擇，另一個(gè)則是分鐘的選擇。也就是說(shuō)，第一步選擇小時(shí)，第二部選擇分鐘它是一個(gè)小時(shí)制的時(shí)間選擇器。而則用于處理拖拽事件，標(biāo)記著當(dāng)前是否處于被拖拽狀態(tài)。 本文的源碼全部位于github項(xiàng)目倉(cāng)庫(kù)react-times，如果有差異請(qǐng)以github為準(zhǔn)。最終線上DEMO可見(jiàn)react-times github page 文章記錄了一次創(chuàng)建獨(dú)立React組件...

    lifesimple 評(píng)論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評(píng)論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評(píng)論0 收藏0

  • javascript功能插件大集合，寫(xiě)前端的親們記得收藏

    摘要：一個(gè)專(zhuān)注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過(guò)充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫(kù)。 【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

    cfanr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<