content: import moment from 'moment';
  import Pikaday from 'pikaday';
  import React from 'react';
  import { FormInput } from 'elemental';
  
  
  module.exports = React.createClass({
  	
  	displayName: 'DateInput',
  	
  	// set default properties
  	getDefaultProps: function() {
  		return {
  			format: 'YYYY-MM-DD'
  		};
  	},
  	
  	getInitialState: function() {
  		return {
  			value: this.props.value,
  			id: Math.round(Math.random() * 100000)
  		};
  	},
  	
  	componentWillReceiveProps: function(newProps) {
  		if (newProps.value === this.state.value) return;
  		this.setState({
  			value: newProps.value
  		});
  		this.picker.setMoment(moment(newProps.value, this.props.format));
  	},
  
  	componentDidMount: function() {
  		this.picker = new Pikaday({ 
  			field: this.getDOMNode(),
  			format: this.props.format,
  			yearRange: this.props.yearRange,
  			onSelect: (date) => { // eslint-disable-line no-unused-vars
  				if (this.props.onChange && this.picker.toString() !== this.props.value) {
  					this.props.onChange(this.picker.toString());
  				}
  			}
  		});
  	},
  
  	componentWillUnmount: function() {
  		this.picker.destroy();
  	},
  	
  	handleChange: function(e) {
  		if (e.target.value === this.state.value) return;
  		this.setState({ value: e.target.value });
  	},
  	
  	handleBlur: function(e) { // eslint-disable-line no-unused-vars
  		if (this.state.value === this.props.value) return;
  		var newValue = moment(this.state.value, this.props.format);
  		if (newValue.isValid()) {
  			this.picker.setMoment(newValue);
  		} else {
  			this.picker.setDate(null);
  			if (this.props.onChange) this.props.onChange('');
  		}
  	},
  
  	render: function() {
  		return <FormInput name={this.props.name} value={this.state.value} placeholder={this.props.format} onChange={this.handleChange} onBlur={this.handleBlur} autoComplete="off" />;
  	}
  	
  });
  