React DatePicker

React 日期组件。

Demo

Demo：chenxsan.github.io/react-date-picker-cs

Install

You can install it from npm:

npm install react-date-picker-cs --save

If you use jspm, then:

jspm install npm:react-date-picker-cs

then import DatePicker from 'react-date-picker-cs' where you want to use.

You can also link to dist/react-date-picker-cs.js and dist/ReactDatePicker.css in your HTML directly if you don't use some tools like browserify or webpack or jspm。

Usage

var React = require('react');
var ReactDatePicker = require('react-date-picker-cs');

var App = React.createClass({
	getInitialState: function() {
		return {
			selectedDate: '2015-07-20'
		};
	},
	log: function(date) {
		this.setState({
			selectedDate: date
		});
	},
	render () {
		return (
			<div>
				<ReactDatePicker onChange={this.log} range={[2013, 2020]} value={this.state.selectedDate} disabled={true}/>
			</div>
		);
	}
});

React.render(<App />, document.getElementById('app'));

Properties

• range {Array} - You can customize the range of year
• onChange {Function} - When user set a date
• locale {String} - Defaults to en, you can also use zh
• disabled {Boolean} - Defaults to false, you can pass in true to disable component
• value {String} - Set a default date

Modify styles

The styles are defined in ReactDatePicker.less, make use of BEM naming convention。

Browser support

I had only test it with the latest Firefox、Chrome and Safari on Mac OSX.

Customization

The source code is in src folder, so you can customize it as you like.

Anything related to developing this component, please check JedWatson/generator-react-component.

Test

Test code is in test folder, you can run:

npm test

License

MIT. Copyright (c) 2015 Sam Chen.