datepicker example

datepicker.jsx

require('rc-calendar/assets/bootstrap.css');
var React = require('react');
var Calendar = require('rc-calendar');
var GregorianCalendar = require('gregorian-calendar');
var DatetimeFormat = require('gregorian-calendar-format');

var DatePicker = React.createClass({

	getDefaultProps: function() {
		return {
			formatter: new DatetimeFormat("dd/MM/yyyy HH:mm:ss")
		};
	},

	getInitialState: function() {
		var now = new GregorianCalendar();
		now.setTime(Date.now());

		return {
			value: now
		};
	},

	onOpenChange: function(e) {
		this.setState({
			open: e.open
		});
	},

	onCloseChange: function(e) {
		this.setState({
			open: e.open
		});
	},

	toggle: function() {
		this.setState({
	      open: !this.state.open
	    });
	},

	render: function() {

		var calendar = <Calendar 
							style={{ zIndex: 2000 }}
							orient={['bottom', 'right']}
							showTime={this.props.showTime}
							showOk={true} />

		return (
			<div ref="divContainer" style={{
		        'boxSizing': 'border-box',
		        'position': 'relative',
		        'display': 'block',
		        'lineHeight': 1.5,
		        'marginBottom': 22
		      }}>
				<Calendar.Picker 
					rootNode={React.findDOMNode(this.refs.divContainer)}
					adjustOrientOnCalendarOverflow={true}					
					calendar={calendar}
					defaultOpen={false}
					formatter={this.props.formatter}
					onOpen={this.onOpenChange}
					onClose={this.onCloseChange}
					state={this.state.open}
					>
					<input style={{width: 200}} disabled={false} placeholder={this.props.placeholder} onClick={this.toggle}/>
				</Calendar.Picker>	
			</div>
		);
	}

});

module.exports = DatePicker;