Photonix

DateRangePicker

A premium component for selecting a range of dates, either as an inline panel or a popover input.

Preview

Usage
import { DateRangePicker } from '@photonix/ultimate';

const [range, setRange] = useState<DateRange>({ start: new Date() });

<DateRangePicker 
  label="Select Range"
  value={range} 
  onChange={setRange} 
  variant="single"
/>

Component API

DateRangePicker

Prop
Type
Default
Description
className
string
-
value
DateRange
-
defaultValue
DateRange
-
onChange
((range: DateRange) => void)
-
variant
"static" | "single"
'static'
Mode of display: 'static' (inline panel), 'single' (one input)
label
string
-
Label for single input mode
labelStyle
"inside" | "outside"
'outside'
Label style
helperText
string
-
Helper text
error
boolean
-
Error state
dateFormat
string
'dd/MM/yyyy'
Date format
placeholder
string
'Select range'
Placeholder
showPresets
boolean
true
Show preset quick actions sidebar. Default is true.
disabled
boolean
false
Disabled state
portal
boolean
true
Whether to render the dropdown menu in a portal. Default is true.
fullWidth
boolean
true
Whether the picker takes up full width of container. Default is true.
width
string | number
-
Fixed width of the picker.
style
React.CSSProperties
-
Additional styles.
presentation
OverlayPresentation
'auto'
Presentation mode. In auto mode, mobile viewports use a sheet and desktop uses a popover.
sheetTitle
string
-
Title used for the mobile sheet. Defaults to label or placeholder.

Variants

Single Input (Popover)

Default input-based picker that opens the calendar in a popover.

Single Input (Popover)
const [range, setRange] = useState<DateRange | undefined>();

<DateRangePicker 
  label="Check-in - Check-out" 
  variant="single" 
  value={range}
  onChange={setRange}
/>

Static Panel

The picker can be rendered directly in the page for dashboard filters or sidebars.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Static Panel
const [range, setRange] = useState<DateRange | undefined>();

<DateRangePicker 
  variant="static" 
  value={range}
  onChange={setRange}
/>

Quick Presets

Optional sidebar with common date ranges. Can be disabled via the showPresets prop.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Quick Presets
<DateRangePicker variant="static" showPresets={true} />

States

Support for error and disabled states in single input mode.

Invalid range selected
States
<DateRangePicker label="Error State" variant="single" error helperText="Invalid range selected" />
<DateRangePicker label="Disabled" variant="single" disabled />

Sheet Presentation

Force the DateSheet range selector for testing mobile behavior on any viewport.

Sheet Presentation
<DateRangePicker
  label="Booking Period"
  variant="single"
  sheetTitle="Select booking period"
  presentation="sheet"
  value={range}
  onChange={setRange}
/>

Width & Full Width

DateRangePicker (single mode) is full-width (100%) by default. You can set a fixed width or set fullWidth to false (320px).

Width & Full Width
<DateRangePicker label="Fixed Width" variant="single" width="400px" />
<DateRangePicker label="Standard Fixed" variant="single" fullWidth={false} />

On this page

Preview
Component API
Variants
Single Input
Static Panel
Quick Presets
Sheet Presentation
States
Photonix UI - React Components, Templates & Figma Design System