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

useDateInput

useDateInput is a hook which will provide the props required to compose together a Calendar with an input component of your choice.

You could use an HTML input, or an Input or Formfield from your favourite UI framework, or even your own component.

A simple example of use is

const {
Calendar,
CalendarProvider,
getCalendarProviderProps,
getInputProps,
getPopperProps,
} = useDateInput();
  • Calendar is the calendar component.
  • CalendarProvider is the context which wires all the UI components together, you can use it in your own components to manage state
  • getCalendarProviderProps is a callback which provides the props for CalendarProvider
  • getInputProps is a callback which provides the props for your Input UI Element.
  • getPopperProps is an callback which provides the props for any Popper UI Element.

Popper's are a portal which are only needed if you are open the Calendar from another component.
ie. an Input when clicked display the Calendar in a portal, which overlays the rest of the page.

When your input and Calendar are composed together by useDateInput it should look like this

Example

Actions

useDateInput provides an imperative API for the controlled state, use-case.

Pass a ref to useDateInput and it will be assigned an impertive API of state and helpers.

const {
Calendar,
CalendarProvider,
getCalendarProviderProps,
getInputProps,
getPopperProps,
} = useDateInput({
actions
});

The imperative API takes the form.

actions.current = {
createDate,
dispatch,
mouseClickOutside,
navigateNext,
navigatePrevious,
selectDate,
setAnimating,
setEnableKeyboardNavigation,
setKeyboardCursor,
setMouseCursor,
setEndDate,
setStartDate,
setOpen,
setKeyPress,
setVisibleFromDate
}