use-date-input - Build Your Own Date Picker

AnimatedMonthGroup

The AnimatedMonthGroup component animates it's children based on the change of the visibleFromDate and refs, applied to the first (firstColumnRef). and last column (groupRef).

In the default implementation, AnimatedMonthGroup is the parent of AnimatedMonth and is used to manage scroll movement between columns based on the changes to visibleFromDate.

Example

Build your own datepicker

with use-date-input

Build your own datepicker

with use-date-input

Build your own datepicker

with use-date-input

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const AddYourComponentHere = isSmallBreakpoint
    ? DemoContentXSmall
    : DemoContent
  const { createDate, addMonths, subtractMonths } = dateAdapter()
  const [visibleFromDate, setVisibleFromDate] = useState(createDate())
  const column1Ref = useRef()
  const groupRef = useRef()
  function handleNextMonthClick() {
    const nextMonth = addMonths(visibleFromDate, 1)
    setVisibleFromDate(nextMonth)
  }
  function handlePreviousMonthClick() {
    const previousMonth = subtractMonths(visibleFromDate, 1)
    setVisibleFromDate(previousMonth)
  }
  function handleNextQuarterClick() {
    const nextMonth = addMonths(visibleFromDate, 3)
    setVisibleFromDate(nextMonth)
  }
  function handlePreviousQuarterClick() {
    const nextMonth = subtractMonths(visibleFromDate, 3)
    setVisibleFromDate(nextMonth)
  }
  const width = isSmallBreakpoint ? '300px' : '600px'
  return (
    <CalendarProvider adapter={dateAdapter} numOfColumns={3}>
      <ButtonBar>
        <Button onClick={handlePreviousMonthClick}>
          {isSmallBreakpoint ? '-1' : 'Previous Month'}
        </Button>
        <Button onClick={handleNextMonthClick}>
          {isSmallBreakpoint ? '+1' : 'Next Month'}
        </Button>
        <Button onClick={handlePreviousQuarterClick}>
          {isSmallBreakpoint ? '-3' : 'Prevous Quarter'}
        </Button>
        <Button onClick={handleNextQuarterClick}>
          {isSmallBreakpoint ? '+3' : 'Next Quarter'}
        </Button>
      </ButtonBar>
      <div style={{ width, padding: '8px' }}>
        <AnimatedMonthGroup
          firstColumnRef={column1Ref}
          groupRef={groupRef}
          visibleFromDate={visibleFromDate}
        >
          <div ref={groupRef}>
            <AddYourComponentHere
              style={{ display: 'inline-flex' }}
              ref={column1Ref}
            >
              Column 1
            </AddYourComponentHere>
            <AddYourComponentHere style={{ display: 'inline-flex' }}>
              Column 2
            </AddYourComponentHere>
            <AddYourComponentHere style={{ display: 'inline-flex' }}>
              Column 3
            </AddYourComponentHere>
          </div>
        </AnimatedMonthGroup>
      </div>
    </CalendarProvider>
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const AddYourComponentHere = isSmallBreakpoint
    ? DemoContentXSmall
    : DemoContent
  const { createDate, addMonths, subtractMonths } = dateAdapter()
  const [visibleFromDate, setVisibleFromDate] = useState(createDate())
  const column1Ref = useRef()
  const groupRef = useRef()
  function handleNextMonthClick() {
    const nextMonth = addMonths(visibleFromDate, 1)
    setVisibleFromDate(nextMonth)
  }
  function handlePreviousMonthClick() {
    const previousMonth = subtractMonths(visibleFromDate, 1)
    setVisibleFromDate(previousMonth)
  }
  function handleNextQuarterClick() {
    const nextMonth = addMonths(visibleFromDate, 3)
    setVisibleFromDate(nextMonth)
  }
  function handlePreviousQuarterClick() {
    const nextMonth = subtractMonths(visibleFromDate, 3)
    setVisibleFromDate(nextMonth)
  }
  const width = isSmallBreakpoint ? '300px' : '600px'
  return (
    <CalendarProvider adapter={dateAdapter} numOfColumns={3}>
      <ButtonBar>
        <Button onClick={handlePreviousMonthClick}>
          {isSmallBreakpoint ? '-1' : 'Previous Month'}
        </Button>
        <Button onClick={handleNextMonthClick}>
          {isSmallBreakpoint ? '+1' : 'Next Month'}
        </Button>
        <Button onClick={handlePreviousQuarterClick}>
          {isSmallBreakpoint ? '-3' : 'Prevous Quarter'}
        </Button>
        <Button onClick={handleNextQuarterClick}>
          {isSmallBreakpoint ? '+3' : 'Next Quarter'}
        </Button>
      </ButtonBar>
      <div style={{ width, padding: '8px' }}>
        <AnimatedMonthGroup
          firstColumnRef={column1Ref}
          groupRef={groupRef}
          visibleFromDate={visibleFromDate}
        >
          <div ref={groupRef}>
            <AddYourComponentHere
              style={{ display: 'inline-flex' }}
              ref={column1Ref}
            >
              Column 1
            </AddYourComponentHere>
            <AddYourComponentHere style={{ display: 'inline-flex' }}>
              Column 2
            </AddYourComponentHere>
            <AddYourComponentHere style={{ display: 'inline-flex' }}>
              Column 3
            </AddYourComponentHere>
          </div>
        </AnimatedMonthGroup>
      </div>
    </CalendarProvider>
  )
}

Props

Prop Name	Type	Is Required	Description
children	`element`	optional	Children
firstColumnRef	`object`	required	Ref to the first column
groupRef	`object`	required	Ref to the MonthGroup
visibleFromDate	`object`	required	Visible from date, used to control animation between columns and MonthGroup

Importing

It can be imported as either the base component

import { AnimatedMonthGroup } 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 { CustomisableAnimatedMonthGroup } 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.

AnimatedMonthGroup

.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