Gist for integrating react-dates

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import Icon from './icon';
import {Form, Input, FormGroup, Container, Label} from 'reactstrap';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import {SingleDatePicker} from 'react-dates';

class App extends Component {
  constructor(props) {
    super(props);
    this.state ={
      date: null,
      focused: null
    }
  }
  render() {
    return (
      <div>
        <Container>
          <Form>
            <FormGroup>
              <Label for="firstname">Name: </Label>
              <Input type="text" name="firstname" />
            </FormGroup>
            <FormGroup>
              <Label for="lastname">Last Name: </Label>
              <Input type="text" name="lastname" />
            </FormGroup>
            <FormGroup>
            <SingleDatePicker
                          // showClearDate={true}
                          customInputIcon={
                            <svg className="icon icon-small">
                              <Icon
                                icon="ICON_CALENDER"
                                className="icon icon-large"
                              />
                            </svg>
                          }
                          inputIconPosition="after"
                          small={true}
                          block={false}
                          numberOfMonths={1}
                          date={this.state.date}
                          onDateChange={date => this.handleDateChange(date)}
                          focused={this.state.focused}
                          onFocusChange={({ focused }) =>
                            this.setState({ focused })
                          }
                          openDirection="up"
                          hideKeyboardShortcutsPanel={true}
                        />
            </FormGroup>
          </Form>
        </Container>
      </div>
    );
  }
}

export default App;

icon.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Icons from './icons';

class Icon extends Component {
  render() {
    return (
      <svg
        className={this.props.className || ''}
        viewBox={Icons[this.props.icon].viewBox}
        dangerouslySetInnerHTML={{ __html: Icons[this.props.icon].data }}
      />
    );
  }

  // shouldComponentUpdate() {
  //   return false;
  // }
}

Icon.propTypes = {
  icon: PropTypes.string.isRequired,
  className: PropTypes.string
};

export default Icon;

icons.js

export default {
    ICON_CALENDER: {
        viewBox: '0 0 32 32',
        data:
          '<title>calendar</title><path d="M30.4 2.133h-3.733v-1.6c0-0.295-0.238-0.533-0.533-0.533h-3.733c-0.295 0-0.533 0.238-0.533 0.533v1.6h-11.733v-1.6c0-0.295-0.238-0.533-0.533-0.533h-3.733c-0.295 0-0.533 0.238-0.533 0.533v1.6h-3.733c-0.295 0-0.533 0.238-0.533 0.533v28.8c0 0.295 0.238 0.533 0.533 0.533h28.8c0.295 0 0.533-0.238 0.533-0.533v-28.8c0-0.295-0.238-0.533-0.533-0.533zM22.933 1.067h2.667v3.2h-2.667v-3.2zM6.4 1.067h2.667v3.2h-2.667v-3.2zM2.133 3.2h3.2v1.6c0 0.295 0.238 0.533 0.533 0.533h3.733c0.295 0 0.533-0.238 0.533-0.533v-1.6h11.733v1.6c0 0.295 0.238 0.533 0.533 0.533h3.733c0.295 0 0.533-0.238 0.533-0.533v-1.6h3.2v4.8h-27.733v-4.8zM2.133 30.933v-21.867h27.733v21.867h-27.733z"></path><path d="M20.267 12.267h-14.4v15.467h20.267v-15.467h-5.867zM16.533 13.333h3.733v3.733h-3.733v-3.733zM20.267 21.867h-3.733v-3.733h3.733v3.733zM11.733 18.133h3.733v3.733h-3.733v-3.733zM11.733 13.333h3.733v3.733h-3.733v-3.733zM6.933 13.333h3.733v3.733h-3.733v-3.733zM6.933 18.133h3.733v3.733h-3.733v-3.733zM10.667 26.667h-3.733v-3.733h3.733v3.733zM15.467 26.667h-3.733v-3.733h3.733v3.733zM20.267 26.667h-3.733v-3.733h3.733v3.733zM25.067 26.667h-3.733v-3.733h3.733v3.733zM25.067 21.867h-3.733v-3.733h3.733v3.733zM25.067 13.333v3.733h-3.733v-3.733h3.733z"></path></symbol>'
      }
}