React wrapper for rome calendar widget

rome-calendar.jsx

const React = require('react');
const rome = require('rome');
const moment = require('moment');

const RomeCalendar = React.createClass({
	propTypes: {
		name: React.PropTypes.string.isRequired,
		handleChange: React.PropTypes.func,
		id: React.PropTypes.string,
		jqm: React.PropTypes.bool,
		label: React.PropTypes.string,
		options: React.PropTypes.object
	},
	subscribe: function () {
		const cal = rome(document.getElementById(this.props.id));

		cal.on('data', (date) => {
			this.setState({
				value: date
			});
			this.props.handleChange(date);
		});
	},
	getInitialState: function () {
		return {
			initialized: false,
			value: ''
		};
	},
	getDefaultProps: function () {
		const initialDate = moment().startOf('day');
		return {
			id: 'rome-calendar',
			options: {
				initialValue: initialDate,
				min: initialDate,
				max: moment(initialDate).add(1, 'days')
			},
			handleChange: () => {}
		};
	},
	componentDidMount: function () {
		const elem = document.getElementById(this.props.id);
		const cal = rome(elem, this.props.options);

		cal.once('ready', () => {
			this.setState({
				initialized: true
			}, this.subscribe);
		});
	},
	componentDidUpdate: function () {
		const elem = document.getElementById(this.props.id);
		const cal = rome(elem, this.props.options);
		cal.setValue(this.props.options.initialValue);
	},
	render: function () {
		const selectedDate = this.props.options.initialValue ?
			this.props.options.initialValue.format('YYYY-MM-DD') :
			null;

		return (
			<div style={this.props.jqm ? {paddingBottom: '1em'} : {}}>
				{this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null}
				<div id={this.props.id}></div>
				<input
					type='date'
					name={this.props.name}
					style={{display: 'none'}}
					data-enhanced='true'
					readOnly={true}
					value={selectedDate}/>
			</div>
		);
	}

});

module.exports = RomeCalendar;