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 (
<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
代码。不断完善国内的前端大业。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。