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

娣辯孩發(fā)布于2019-08-22 10:38 / 1481人閱讀

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

react-mobile-datepicker

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

react-mobile-datepicker可以通過上下滑動來設(shè)置年、月、日。

Github

Demo

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

開始使用

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

組件屬性

名稱	類型	默認(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ù)