m-bee-datetimepicker
基于 React 的移动端日期时间选择组件
Last updated 3 years ago by guoyongfeng .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install m-bee-datetimepicker 
SYNC missed versions from official npm registry.

m-bee-datetimePicker

fork and modified width react-mobile-datepicker

a lightweight react date picker for mobile, Not more than 4k

m-bee-datetimePicker provides a component that can set year, month and day by sliding up or down.

Features

  • is only 4k.
  • It does not depend on moment.js

Screenshots

Getting Started

Install

Using npm:

$ npm install m-bee-datetimePicker --save

Import what you need

The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.

// Using an ES6 transpiler like Babel
import  React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'm-bee-datetimePicker';

Usage Example

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>

				<DatePicker
					value={this.state.time}
					isOpen={this.state.isOpen}
					onSelect={this.handleSelect}
					onCancel={this.handleCancel} />
			</div>
		);
	}
}


ReactDOM.render(<App />, document.getElementById('react-box'));

PropTypes

Property Type Default Description
isPopup Boolean true whether as popup add a overlay
isOpen Boolean false whether to open datepicker
theme String default theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark'
dateFormat Array ['YYYY', 'M', 'D'] according to year, month, day format specified display text. E.g ['YYYY年', 'MM月', 'DD日']
value Date new Date() date value
min Date new Date(1970, 0, 1) minimum date
max Date new Date(2050, 0, 1) maximum date
onSelect Function () => {} the callback function after click button of done, Date object as a parameter
onCancel Function () => {} the callback function after click button of cancel

Changelog

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.

Current Tags

  • 1.0.5                                ...           latest (3 years ago)

3 Versions

  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dependents (2)

Copyright 2014 - 2016 © taobao.org |