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

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 (
            <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代碼。不斷完善國內的前端大業。