react-date-picker input integration

date-input.jsx

import React from 'react'
import assign from 'object-assign';
import Input from 'react-filed';
import join from 'classnames';

import DatePicker from 'react-date-picker';
import moment from 'moment';
import ClassName from './index.local.styl';

export default class DateInput extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      focused: false
    };
  }

  toDate(date){
    if (!date){
      return '';
    }

    return moment(date, this.props.dateFormat);
  }

  toDateString(date){
    if (!date){
      return '';
    }

    if (typeof date != 'string'){
      date = moment(date)
              .format(this.props.displayDateFormat || this.props.dateFormat);
    }

    return date;
  }

  render(){

    const props = this.props;
    const state = this.state;

    this.date = this.toDate(props.date || props.value);
    this.dateString = this.toDateString(this.date);

    const className = join(
      props.className,
      ClassName.dateField,
      state.focused? ClassName.focused: ''
    );

    const inputProps = assign({}, props.inputProps, {
      onChange: props.onChange,
      value: props.value,
      placeholder: props.placeholder
    });

    return <div {...props} className={className}>
      <Input
        readOnly
        {...inputProps}
        value={this.dateString}
        ref="input"
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        onClick={this.onClick}
      />
      {this.renderPicker()}
    </div>;
  }

  renderPicker(){
    if (!this.state.focused || !this.state.pickerVisible){
      return null;
    }

    const props = this.props;
    const datePickerProps = {
      className: ClassName.picker,
      date: this.date,
      dateFormat: props.dateFormat,
      onChange: this.onChange,
      style: props.pickerStyle,
      onMouseDown: this.onPickerMouseDown
    };

    let result;

    if (props.renderPicker){
      result = props.renderPicker(datePickerProps);
    }

    if (result === undefined){
      return <DatePicker {...datePickerProps}/>;
    }
  }

  showPicker(){
    this.setState({
      pickerVisible: true
    });
  }

  togglePicker(){
    this.setState({
      pickerVisible: !this.state.pickerVisible
    });
  }

  onClick(){
    if (this.state.focused && !this.state.pickerVisible){
      this.togglePicker();
    }
  }

  onPickerMouseDown(event){
    event.preventDefault();
  }

  onChange(dateString){
    this.setState({
      pickerVisible: false
    });
    this.props.onChange(dateString);
  }

  focus(){
    React.findDOMNode(this.refs.input).focus();
  }

  onBlur(event){
    this.setState({
      focused: false
    });

    this.props.onBlur(event);
  }

  onFocus(event){
    this.setState({
      focused: true,
      pickerVisible: true
    });

    this.props.onFocus(event);
  }
}

DateInput.propTypes = {
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  dateFormat: PropTypes.string
};

DateInput.defaultProps = {
  dateFormat: 'YYYY-MM-DDTHH:mm:ss',
  displayDateFormat: 'YYYY-MM-YY',

  onChange: () => {},
  onBlur: () => {},
  onFocus: () => {}
};