use-date-input - Build Your Own Date Picker

useDateRangeInput

useDateRangeInput is a hook which will provide the props required to compose together a Calendar with a pair ofinput components of your choice.

Like with useDateInput you can 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,
    getStartDateProps,
    getEndDateProps,
    getPopperProps,
} = useDateRangeInput();

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
getStartDateProps is a callback which provides the props for your start date, Input UI Element.
getEndDateProps is a callback which provides the props for your end date, 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 components and Calendar are composed together by useDateRangeInput it should look like this

Example

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 6
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const actions = useRef()
  const handleStateChange = useCallback((changes, state) => {
    console.log('state changed', changes, state)
  }, [])
  const handleStartDateInputChange = useCallback(event => {
    const { value } = event.target
    console.log('start date input changed to', value)
    setStartDate(value)
  }, [])
  const handleEndDateInputChange = useCallback(event => {
    const { value } = event.target
    action('end date input changed to')(value)
    setEndDate(value)
  }, [])
  const handleCalendarChange = useCallback(value => {
    console.log('calendar changed selected date', value)
    const { dateAPI } = actions.current
    const [rangeStart, rangeEnd] = value
    setStartDate(rangeStart ? dateAPI.format(rangeStart, 'dd/MM/yyyy') : '')
    setEndDate(rangeEnd ? dateAPI.format(rangeEnd, 'dd/MM/yyyy') : '')
  }, [])
  const {
    Calendar,
    CalendarProvider,
    getCalendarProviderProps,
    getStartDateProps,
    getEndDateProps,
    getPopperProps,
  } = useDateRangeInput({
    actions,
    parse: value => parse(value, 'dd/MM/yyyy', new Date()),
  })
  return (
    <>
      <input
        {...getStartDateProps({ onChange: handleStartDateInputChange })}
        value={startDate}
      />
      <input
        {...getEndDateProps({ onChange: handleEndDateInputChange })}
        value={endDate}
      />
      <CalendarProvider
        {...getCalendarProviderProps({
          adapter: dateAdapter,
          numOfColumns,
          numOfVisibleMonths,
          onCalendarChange: handleCalendarChange,
          onStateChange: handleStateChange,
        })}
      >
        <Popper {...getPopperProps({ placement: 'bottom-start' })}>
          <div style={{ background: '#1FB6FF', padding: '10px' }}>
            <Calendar />
          </div>
        </Popper>
      </CalendarProvider>
    </>
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 6
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const actions = useRef()
  const handleStateChange = useCallback((changes, state) => {
    console.log('state changed', changes, state)
  }, [])
  const handleStartDateInputChange = useCallback(event => {
    const { value } = event.target
    console.log('start date input changed to', value)
    setStartDate(value)
  }, [])
  const handleEndDateInputChange = useCallback(event => {
    const { value } = event.target
    action('end date input changed to')(value)
    setEndDate(value)
  }, [])
  const handleCalendarChange = useCallback(value => {
    console.log('calendar changed selected date', value)
    const { dateAPI } = actions.current
    const [rangeStart, rangeEnd] = value
    setStartDate(rangeStart ? dateAPI.format(rangeStart, 'dd/MM/yyyy') : '')
    setEndDate(rangeEnd ? dateAPI.format(rangeEnd, 'dd/MM/yyyy') : '')
  }, [])
  const {
    Calendar,
    CalendarProvider,
    getCalendarProviderProps,
    getStartDateProps,
    getEndDateProps,
    getPopperProps,
  } = useDateRangeInput({
    actions,
    parse: value => parse(value, 'dd/MM/yyyy', new Date()),
  })
  return (
    <>
      <input
        {...getStartDateProps({ onChange: handleStartDateInputChange })}
        value={startDate}
      />
      <input
        {...getEndDateProps({ onChange: handleEndDateInputChange })}
        value={endDate}
      />
      <CalendarProvider
        {...getCalendarProviderProps({
          adapter: dateAdapter,
          numOfColumns,
          numOfVisibleMonths,
          onCalendarChange: handleCalendarChange,
          onStateChange: handleStateChange,
        })}
      >
        <Popper {...getPopperProps({ placement: 'bottom-start' })}>
          <div style={{ background: '#1FB6FF', padding: '10px' }}>
            <Calendar />
          </div>
        </Popper>
      </CalendarProvider>
    </>
  )
}

Actions

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

Pass a ref to useDateRangeInput 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
}

useDateRangeInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Example

Actions

Example