Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub
Web docs
On this pageComponent preview
Forms and dates

useDateRangePicker

Keeps paired native date inputs constrained so the end date cannot be before the start date.

Copy React exampleDateRangePicker component
Live component preview · Astro

Explore DateRangePicker

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useDateRangePicker.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

tsxuseDateRangePicker example
import { useDateRangePicker } from '@santi020k/lumen-react'

export function BookingRange() {
  const range = useDateRangePicker()

  return (
    <div className="ui-date-range-picker" {...range.rootProps}>
      <input className="ui-input ui-date-picker" aria-label="Start date" {...range.getStartProps()} />
      <input className="ui-input ui-date-picker" aria-label="End date" {...range.getEndProps()} />
    </div>
  )
}
import { useDateRangePicker } from '@santi020k/lumen-react'

export function BookingRange() {
  const range = useDateRangePicker()

  return (
    <div className="ui-date-range-picker" {...range.rootProps}>
      <input className="ui-input ui-date-picker" aria-label="Start date" {...range.getStartProps()} />
      <input className="ui-input ui-date-picker" aria-label="End date" {...range.getEndProps()} />
    </div>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

PropertyTypeDefaultDescription
onRangeChange(detail: DateRangePickerChangeDetail) => void-Callback fired after the date range is synchronized.

Controller return values

PropertyTypeDescription
rootPropsLumenProps<"div">Spread onto the date range root.
rootRefRefObject<HTMLElement>Ref to the date range root.
getStartProps(props?) => LumenProps<"input">Returns props for the start date input.
getEndProps(props?) => LumenProps<"input">Returns props for the end date input.
syncRange(root?) => DateRangePickerChangeDetailSynchronize min/max constraints and return the current range.
Web docsFull catalog