use-date-input - Build Your Own Date Picker

Root

The Root component is the root component of the Calendar.

Root enables you to re-compose the Calendar with additional UI elements, such as shortcut lists or additional branding. Refer to Composition.

Example

Build your own datepicker

with use-date-input

2021

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const AddYourComponentHere = isSmallBreakpoint
    ? DemoContentSmall
    : DemoContent
  function MyRoot(props) {
    return (
      <>
        <div style={{ display: 'flex' }}>
          <AddYourComponentHere />
          <Root {...props} />
        </div>
      </>
    )
  }
  return (
    <CalendarProvider adapter={dateAdapter} components={{ Root: MyRoot }}>
      <Calendar />
    </CalendarProvider>
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const AddYourComponentHere = isSmallBreakpoint
    ? DemoContentSmall
    : DemoContent
  function MyRoot(props) {
    return (
      <>
        <div style={{ display: 'flex' }}>
          <AddYourComponentHere />
          <Root {...props} />
        </div>
      </>
    )
  }
  return (
    <CalendarProvider adapter={dateAdapter} components={{ Root: MyRoot }}>
      <Calendar />
    </CalendarProvider>
  )
}

Props

Prop Name	Type	Is Required	Default Value	Description
className	`string`	optional		Class name of root element

Importing

It can be imported as either the base component

import { Root } from "@use-date-input/core";

or as an overridable component that can be replaced through the components prop in CalendarProvider.
Refer to How to replace UI components.

import { CustomisableMonthRoot } from "@use-date-input/core";

If providing your own component, it can be useful to import the base component and use it within your composition.

Root

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

Props

Importing

Example