DateRangePicker

Calendar popover that lets user pick date ranges.

#
Documentation

#
Usage


"use client";
 
import {
  DateRangePicker,
  DateRangePickerContent,
  DateRangePickerTrigger,
} from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <DateRangePicker>
      <DateRangePickerTrigger w="384" />
      <DateRangePickerContent />
    </DateRangePicker>
  );
}

#
Props

#
DateRangePicker

Supports all Popover props in addition to its own. Doesn't render its own HTML element.

Prop
`defaultOpen` The initial open state in uncontrolled mode. `false \| true`
`defaultValue` The initial selected value in uncontrolled mode. `DateRange`
`disabled` `false \| true`
`modal` When enabled interaction with outside elements will be disabled and only popover content will be visible to screen readers. `false \| true`
`onOpenChange` Handler that is called when the open state changes. `(open: boolean) => void`
`onValueChange` Handler that is called when the selected value changes. `(value: DateRange) => void`
`open` The open state in controlled mode. `false \| true`
`value` The selected value in controlled mode. `DateRange`

#
DateRangePickerTrigger

Supports all Button props in addition to its own. Renders a <button> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the button is disabled. `false \| true`
`format` `(date: DateRange) => string` Default: `(date: DateRange) => date.from && date.to ? date.from.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric", }) + " - " + date.to.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric", }) : null`
`hasCustomAnchor` `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"`
`loading` Whether to show loading spinner inside the button. `false \| true`
`placeholder` `string` Default: `Pick a date`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape. `false \| true`

#
DateRangePickerContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content inside the popover after the calendar. `ReactNode`
`addonBefore` Display content inside the popover before the calendar. `ReactNode`
`align` `"center" \| "end" \| "start"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`holiday` Apply the `holiday` modifier to the matching days. `false \| true \| Date \| DateRange \| (date: Date) => boolean \| Date[] \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`
`max` The latest month to end the month navigation. `Date`
`maxH` Whether to restrict the max-height of the content. Content is also restricted by the available height in the screen relative to the trigger. `"xs" \| "sm" \| "md" \| "lg" \| "full"`
`min` The earliest month to start the month navigation. `Date`
`minW` Whether to set the min-width to the width of the trigger. `"0" \| "trigger"`
`onCloseAutoFocus` Event handler called when auto-focusing on close. Can be prevented. `(event: Event) => void`
`onEscapeKeyDown` Event handler called when the escape key is down. Can be prevented. `(event: KeyboardEvent) => void`
`onFocusOutside` Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. `(event: FocusOutsideEvent) => void`
`onInteractOutside` Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void`
`onOpenAutoFocus` Event handler called when auto-focusing on open. Can be prevented. `(event: Event) => void`
`onPointerDownOutside` Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. `(event: PointerDownOutsideEvent) => void`
`side` `"bottom" \| "left" \| "right" \| "top"`
`sideOffset` `number`
`today` The today’s date. Default is the current date. `Date`
`weekend` Apply the `weekend` modifier to the matching days. `false \| true \| Date \| DateRange \| (date: Date) => boolean \| Date[] \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`
`withArrow` Whether to show an arrow. `false \| true`

#
Changelog

#
0.13.10

Added component