use-date-input - Build Your Own Date Picker

useCalendarDispatch

useCalendarDispatch returns the configured reducers dispatcher, along with a helper API for common actions.

const {
    dispatch,
    mouseClickOutside,
    navigateNext,
    navigatePrevious,
    selectDate,
    setAnimating,
    setEnableKeyboardNavigation,
    setKeyboardCursor,
    setMouseCursor,
    setEndDate,
    setStartDate,
    setOpen,
    setKeyPress,
    setVisibleFromDate
} = useCalendarDispatch();

Using the dispatcher

Using the dispatcher we can dispatch any action to the reducers.

2021

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

() => {
  const MyPanel = () => {
    const { dispatch } = useCalendarDispatch()
    const handleClick = () => dispatch({ type: calendarActions.navigateNext })
    return (
      <ButtonBar>
        <Button onClick={handleClick}>NEXT MONTH</Button>
      </ButtonBar>
    )
  }
  return (
    <CalendarProvider adapter={dateAdapter}>
      <MyPanel />
      <Calendar />
    </CalendarProvider>
  )
}

() => {
  const MyPanel = () => {
    const { dispatch } = useCalendarDispatch()
    const handleClick = () => dispatch({ type: calendarActions.navigateNext })
    return (
      <ButtonBar>
        <Button onClick={handleClick}>NEXT MONTH</Button>
      </ButtonBar>
    )
  }
  return (
    <CalendarProvider adapter={dateAdapter}>
      <MyPanel />
      <Calendar />
    </CalendarProvider>
  )
}

Using the helper API

Using the dispatcher we can dispatch the most common actions, through helper methods.