CreditCardForm.js

import React from 'react';
import { Calendar, DateInput, Popover } from 'react-datepicker';

import moment from 'moment';

require('react-datepicker/dist/react-datepicker.css');

export class CreditCardForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focus: false,
            selected: props.selected
        };
    }

    hideCalendar() {
        setTimeout(() => {
            this.setState({
                focus: false
            });
        }, 0);
    }

    handleSelect(date) {
        this.setSelected(date);

        setTimeout(function(){
            this.hideCalendar();
        }.bind(this), 200);
    }

    setSelected(date) {
        var moment = date.moment();

        this.props.onChange(moment);

        this.setState({
            selected: moment
        });
    }

    calendar() {
        if (this.state.focus) {
            return (<Popover>
                <Calendar
                    weekdays={this.props.weekdays}
                    locale={this.props.locale}
                    moment={this.props.moment}
                    dateFormat={this.props.dateFormatCalendar}
                    selected={this.state.selected}
                    onSelect={this.handleSelect}
                    hideCalendar={this.hideCalendar}
                    minDate={this.props.minDate}
                    maxDate={this.props.maxDate}
                    excludeDates={this.props.excludeDates}
                    weekStart={this.props.weekStart} />
                </Popover>);
        }
    }

    render() {
        return (<div>
            <DateInput
                name={this.props.name}
                date={this.state.selected}
                dateFormat={this.props.dateFormat}
                focus={this.state.focus}
                onFocus={this.handleFocus}
                handleClick={this.onInputClick}
                handleEnter={this.hideCalendar}
                setSelected={this.setSelected}
                clearSelected={this.clearSelected}
                hideCalendar={this.hideCalendar}
                placeholderText={this.props.placeholderText}
                disabled={this.props.disabled}
                className={this.props.className} />
            {this.props.disabled ? null : this.calendar()}
        </div>);
    }
};

CreditCardForm.defaultProps = {
    weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    locale: 'en',
    dateFormatCalendar: "MMMM YYYY",
    moment: moment,
    onChange: function() {},
    disabled: false
}