Popper

use-date-input - Build Your Own Date Picker

Popper

Popper is an optional component that has been provided to help build datepickers which open within an overlay (portal).

The hooks, useDateInput and useDateRange support an optional popper that you must render yourself and then apply the getPopperProps to.
For further examples of this Popper in use with the use-date-input hooks, refer to useDateInput and useDateRange.

Otherwise, you can use your own favourite Popper implementation in place of Popper.

Example

() => {
  const [open, setOpen] = useState(false)
  const [anchorRef, setAnchorRef] = useState(null)
  function handleOpenClick() {
    setOpen(!open)
  }
  return (
    <>
      <Button onClick={handleOpenClick} ref={setAnchorRef}>
        {open ? 'Close' : 'Open'}
      </Button>
      <CalendarProvider adapter={dateAdapter}>
        <Popper
          anchorEl={anchorRef}
          onClickOutside={handleOpenClick}
          open={open}
          placement={'bottom-start'}
        >
          <AddYourComponentHere />
        </Popper>
      </CalendarProvider>
    </>
  )
}

() => {
  const [open, setOpen] = useState(false)
  const [anchorRef, setAnchorRef] = useState(null)
  function handleOpenClick() {
    setOpen(!open)
  }
  return (
    <>
      <Button onClick={handleOpenClick} ref={setAnchorRef}>
        {open ? 'Close' : 'Open'}
      </Button>
      <CalendarProvider adapter={dateAdapter}>
        <Popper
          anchorEl={anchorRef}
          onClickOutside={handleOpenClick}
          open={open}
          placement={'bottom-start'}
        >
          <AddYourComponentHere />
        </Popper>
      </CalendarProvider>
    </>
  )
}

Props

Prop Name	Type	Is Required	Description
anchorEl	`func or object`	optional	Anchor element
children	`node`	optional	Popper content
ignoreClickOutsideRefs	`array`	optional	Array of refs, will not close the Popper, if clicked
onClickOutside	`func`	optional	Callback on click outside
onEscapeKey	`func`	optional	Callback on escape key press
open	`bool`	optional	Open/close popper

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

Example

Props

Popper