Skip to main content

Input Fields

Some user interfaces displays a date picker working with an input field. DayPicker includes the useInput hook, returning props to bind DayPicker with a single input field.

Should you need something more sophisticated, give a look to the useInput source to implement your own hook.

Bind DayPicker to an input field#

To bind a DayPicker to an input field, pass the useInput returned values to a DayPicker and an input component:

import * as React from 'react';
import { format } from 'date-fns';
import { DayPicker, useInput, UseInputOptions } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
// Props to pass to `useInput`
const options: UseInputOptions = {
// Select today as default
defaultSelected: new Date(),
// Limit the valid dates
fromYear: 2020,
toYear: 2022,
format: 'PP',
// Make the selection mandatory.
required: true
};
const input = useInput(options);
const footer = (
<form>
<input
{...input.fieldProps}
placeholder={format(new Date(), options.format)}
/>
</form>
);
return (
<>
<p>Type a day or pick one from the calendar.</p>
<DayPicker {...input.dayPickerProps} showWeekNumber footer={footer} />
</>
);
}
Output

Type a day or pick one from the calendar.

March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
10
11
12
13
14