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

react-mobile-datepicker

一个轻量级的react移动端日期选择器，不依赖于moment.js, 只有不到4k大小。

react-mobile-datepicker可以通过上下滑动来设置年、月、日。

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 (

className="select-btn"

onClick={this.handleClick}>

select time

{this.state.time}

value={this.state.time}

isOpen={this.state.isOpen}

onSelect={this.handleSelect}

onCancel={this.handleCancel} />

);

}

}

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