Input box wrapper using http://react-day-picker.js.org/

DateInput.tsx

import * as React from 'react';
import * as moment from 'moment';
import { LocaleUtils, Modifier } from 'react-day-picker';

import DayPickerInput from 'react-day-picker/lib/src/DayPickerInput';

const dateFormat = 'DD/MM/YYYY';

interface YearMonthProps {
  date?: Date;
  disabledDays?: Modifier | Modifier[];
  localeUtils?: LocaleUtils;
  onChange: (d: Date) => void;
  fromMonth: Date;
  toMonth: Date;
}

// Component will receive date, locale and localeUtils props
const YearMonthForm = ({ date, fromMonth, toMonth, localeUtils, onChange }: YearMonthProps) => {
  if (!localeUtils || !date) {
    return null;
  }

  const months = localeUtils.getMonths('en');
  const years = [];
  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
    years.push(i);
  }

  const handleChange = function handleChange(e: any) { // tslint:disable-line
    const { year, month } = e.target.form;
    onChange(new Date(year.value, month.value));
  };

  return (
    <div className='DayPicker-Caption'>
      <select name='month' onChange={handleChange} value={date.getMonth()}>
        {months.map((month, i) => <option key={i} value={i}>{month}</option>)}
      </select>
      <select name='year' onChange={handleChange} value={date.getFullYear()}>
        {years.map((year, i) =>
          <option key={i} value={year}>
            {year}
          </option>
        )}
      </select>
    </div>
  );
};

interface Props {
  date: Date | '';
  month?: Date;
  disabledDays?: Modifier | Modifier[];-[
  fromMonth?: Date;
  toMonth?: Date;
  onDateChange: (d: Date) => void;
  component?: string | React.StatelessComponent;
  error?: boolean;
}
interface State {
  month: Date;
}

export default class DateInput extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      month: props.month || new Date(),
    };

    this.handleDateChange = this.handleDateChange.bind(this);
    this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
  }

  render() {
    const { fromMonth, toMonth, disabledDays, date, error } = this.props;
    if (!fromMonth || !toMonth) {
      return null;
    }

    const dayPickerProps = {
      fromMonth,
      toMonth,
      disabledDays,
      month: this.state.month,
      captionElement: (
        <YearMonthForm
          fromMonth={fromMonth}
          toMonth={toMonth}
          onChange={this.handleYearMonthChange}
        />)
    };

    const value = date && moment(date).format(dateFormat);
    const component = this.props.component || 'input';
    return (
      <DayPickerInput
        readOnly={true}
        component={component}
        value={value}
        error={error}
        onDayChange={this.handleDateChange}
        placeholder={dateFormat}
        format={dateFormat}
        dayPickerProps={dayPickerProps}
      />
    );
  }

  handleDateChange(d: moment.Moment, modifiers: any) { // tslint:disable-line
    const { onDateChange } = this.props;
    onDateChange(d.toDate());
  }

  handleYearMonthChange(month: Date) {
    this.setState({ month });
  }
}