use-date-input - Build Your Own Date Picker
Getting StartedStateThemingCompositionDate FrameworksLocalization
Components
Hooks
AnimatedGroupAnimatedMonthGroupCalendarCalendarProviderPropsClickOutsideDayDayOfWeekHeaderHomeMonthMonthGroupPopperRootWeekWeekHeaderuseCalendarDispatchuseCalendarPropsuseCalendarStateuseDateAPIuseDateInputuseDateRangeInput

CalendarProvider

A CalendarProvider creates a Context required to link a Calendar with other components and holds the state of the component.

To interact with the config or state created by the context, you should use the hooks provided.

You can either wrap a composition in CalendarProvider yourself or if using Calendar on it's own, then Calendar will create the context for you.

Refer to the useDateInput and useDateRange documentation for examples.

Props

Prop NameTypeIs RequiredDefault ValueDescription
actionsobjectoptionalImperative actions API
adapterfuncoptionalDate API adapter
allowRangebooloptionalfalseAllow date range
childrennodeoptionalCalendar children
ignoreClickOutsideRefsarrayoptional[]Array of elements to ignore, when determining a click outside, used to link elements, like date inputs
componentsobjectoptional{}Custom Component overrides
initialEnableKeyboardNavigationbooloptionalfalseInitial state of keyboard navigation
initialSelectedDateobject or arrayoptionalInitial selected date
initialVisibleFromMonthobjectoptionalInitial visible month
isDayDisabledfuncoptionalDay is disabled callback
isRangeValidfuncoptionalDate range is valid callback
numOfColumnsnumberoptional1Number of columns
numOfVisibleMonthsnumberoptional1Number of visible months
onCalendarChangefuncoptionalSelected date change handler
onStateChangefuncoptionalState change handler
reducersarray of funcsoptionalReducer(s), to override default state
weekOffsetnumberoptionalStart of week offset from date API's default