Input field

DayPickerInput binds the DayPicker with an input field, displaying the calendar in an overlay.

See also how to use it with state, how to customize the overlay and how to change the date format.

Code

import React from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

export default function Example() {
  return (
    <div>
      <p>Please type a day:</p>
      <DayPickerInput onDayChange={day => console.log(day)} />
    </div>
  );
}

Result

Please type a day: