1.0.0 • Published 7 years ago

react-mobile-scrolldatetimepicker v1.0.0

Weekly downloads
1
License
ISC
Repository
github
Last release
7 years ago

react-mobile-datetimepicker

Features

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

Getting Started

Install

Using npm:

$ npm install react-mobile-scrolldatetimepicker --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 DateTimePicker from 'react-mobile-scrolldatetimepicker';

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>

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


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

PropTypes

PropertyTypeDefaultDescription
confirmTxtString'完成'set confirm text
cancelTxtString'取消'set cancel text
isPopupBooleantruewhether as popup add a overlay
isOpenBooleanfalsewhether to open datetimepicker
themeStringdefaulttheme of datetimepicker, include 'default', 'dark', 'ios', 'android', 'android-dark'
dateFormatArray'YYYY', 'M', 'D','hh','mm'according to year, month, day format specified display text. E.g 'YYYY年', 'MM月', 'DD日','hh时','mm分钟'
valueDatenew Date()date value
minDatenew Date(1970, 0, 1)minimum date
maxDatenew Date(2050, 0, 1)maximum date
onSelectFunction() => {}the callback function after click button of done, Date object as a parameter
onCancelFunction() => {}the callback function after click button of cancel

How to Contribute

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