props: DayPickerProps): JSX.Element
DayPicker render a date picker component to let users pick dates from a calendar. See http://react-day-picker.js.org for updated documentation and examples.
DayPicker offers different customization props. For example,
- show multiple months using
- display a dropdown to navigate the months via
- display the week numbers with
- disable or hide days with
Change the initially displayed month using the
defaultMonth prop. The
displayed months are controlled by DayPicker and stored in its internal
state. To control the months yourself, use
month instead of
and use the
onMonthChange event to set it.
To limit the months the user can navigate to, use
DayPicker supports different selection mode that can be toggled using the
mode="single": only one day can be selected. Use
requiredto make the selection required. Use the
onSelectevent handler to get the selected days.
mode="multiple": users can select one or more days. Limit the amount of days that can be selected with the
mode="range": users can select a range of days. Limit the amount of days in the range with the
These selection modes should cover the most common use cases. In case you
need a more refined way of selecting days, use
mode="uncontrolled". Use the
selected props and add the day event handlers to add/remove days from the
A modifier represents different styles or states for the days displayed in
the calendar (like "selected" or "disabled"). Define custom modifiers using
You can customize how the content is displayed in the date picker by using either the formatters or replacing the internal components.
For the most common cases you want to use the
formatters prop to change how
the content is formatted in the calendar. Use the
components prop to
replace the internal components, like the navigation icons.
DayPicker comes with a default, basic style in
use it as template for your own style.
If you are using CSS modules, pass the imported styles object the
You can also style the elements via inline-styles using the
If you need to bind the date picker to a form field, you can use the
useInput hooks for a basic behavior. See the
useInput source as an
example to bind the date picker with form fields.
To localize DayPicker, import the locale from
date-fns package and use the
For example, to use Spanish locale: