State

use-date-input comes with a set of default reducers which are composed together to create the state for useDateInput, useDateRangeInput and Calender.

You can override the default state or add additional state, whatever your components need, with the reducers prop.
The reducers prop can be provided to either CalendarProvider or Calendar.

In this example we change the selection created by the default reducers, so that it adds 1 week to any date that is selected.
Any part of the default state can be modified in this way.

() => {
  // import { Calendar, calendarReducer, calendarActions, singleDateReducer } from "@use-date-input/core";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  function handleStateChange(newState, changes) {
    console.log('new state', newState.startDate, changes)
  }
  const myReducer = (state, action, dateAPI) => {
    if (action.type === calendarActions.selectDate) {
      return { ...state, startDate: dateAPI.addWeeks(state.startDate, 1) }
    }
    return state
  }
  return (
    <Calendar
      adapter={dateAdapter}
      reducers={[calendarReducer, singleDateReducer, myReducer]}
      onStateChange={handleStateChange}
    />
  )
}

Default Reducers

A brief description of the default reducers.

calendarReducer

import { calendarReducer, calendarActions } from "@use-date-input/core";

Creates the state for a stand-alone Calendar with no associated input.

Associated actions :

• focusDate - Focus a specific date
• keyPress - Keyboard action
• mouseClickOutside - Mouse clicked outside of Calendar (or allow list)
• navigatePrevious - Navigate to the previous month
• navigateNext - Navigate to the next month
• selectDate - Select a date (emulating keyboard or mouse selection)
• setAnimating - Create the transient state of animating between dates (used to prevent interim selection)
• setEnableKeyboardNavigation - Enable the navigation of the Calendar cursor with the keyboard controls
• setEndDate - Create an end date for a date range (programatically)
• setFocusableDate - Enable/Disable focusable dates within the Calendar
• setKeyboardCursor - Set the keyboard cursor within the Calendar
• setMouseCursor - Set the mouse cursor within the Calendar
• setStartDate - Create an start date for a date range (programatically)
• setOpen - Open the visible state of the Calendar
• setVisibleFromDate - Set the initial visible month

singleDateReducer

import { singleDateReducer, calendarActions } from "@use-date-input/core";

When combined with the singleDateReducer it selects single dates.

Associated actions :

• Uses the calendarReducer actions

dateRangeReducer

import { dateRangeReducer, calendarActions } from "@use-date-input/core";

When combined with the calendarReducer it selects a date range.

Associated actions :

• Uses the calendarReducer actions

dateInputReducer

import { dateInputReducer, dateInputActions } from "@use-date-input/core";

Combines with calendarReducer to select a single date from either the Calendar or an input.

Associated actions :

• blurInput : Blur the associated input's focus
• focusInput : Focus the associated input
• focusLock : Enable/Disable the focus lock, so that tabbing behaviour links both input and Calendar

dateRangeInputReducer

import { dateRangeInputReducer, dateRangeInputActions, dateRangeInputType } from "@use-date-input/core";

Combines with calendarReducer to select a date range from either the Calendar or 2 inputs, representing the start and end date.

Associated actions :

• blurStartDate : Blur the associated input's focus
• blurEndDate : Blur the associated input's focus
• focusStartDate : Focus the associated input
• focusEndDate : Focus the associated input
• focusLock : Enable/Disable the focus lock, so that tabbing behaviour links both input and Calendar

Reading State

Providing an onStateChange callback to the CalendarProvider enables you to respond to state change.

In this example, state and changes are logged to the console.

() => {
  // import { Calendar } from "@use-date-input/core";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  function handleStateChange(newState, changes) {
    console.log('new state', newState, changes)
  }
  return <Calendar adapter={dateAdapter} onStateChange={handleStateChange} />
}

Changing State

In addition to the reducers, state can be modified via the useCalendarDispatch hook or an actions ref.

useCalendarDispatch

Actions can be dispatched via an API returned by the useCalendarDispatch hook.

useCalendarDispatch can be used in any child of CalendarProvider.

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

Use dispatch or use the helper functions, which wrap the dispatch method, they are equivalent.

Refer to the useCalendarDispatch docs for examples.

Actions Ref

Providing an actions ref to the CalendarProvider enables you to control the Component state externally using either the helper functions or the dispatcher itself.

The ref will be assigned the useCalendarDispatch API that enables you to modify the state.

An actions ref can be used anywhere, even outside the CalendarProvider hierachy and unlike the hook useCalendarDispatch can be called, as and when needed.

In this example, the date range is created by setting the endDate, upon selection of the start date.

() => {
  // import { useRef, useState } from "react";
  // import { Calendar, CalendarProvider } from "@use-date-input/core";
  // imprt dateAdapter from "@use-date-input/date-fns-adapter";
  const [storeDate, setStoreDate] = useState()
  const actions = useRef()
  function handleCalendarChange(value) {
    const [rangeStart, rangeEnd] = value
    const { setStartDate, setEndDate, dateAPI } = actions.current
    if (!dateAPI.isSameDay(storeDate, rangeStart)) {
      const endDate = dateAPI.addWeeks(rangeStart, 1)
      setEndDate(endDate)
      setStoreDate(rangeStart)
    }
  }
  return (
    <CalendarProvider
      actions={actions}
      adapter={dateAdapter}
      allowRange
      onCalendarChange={handleCalendarChange}
    >
      <Calendar />
    </CalendarProvider>
  )
}