Photonix

DatePicker

A premium input for selecting dates with a calendar popover.

Preview

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

const [date, setDate] = useState<Date | undefined>(undefined);

<DatePicker 
  label="Select Date" 
  value={date} 
  onChange={setDate} 
/>

Component API

DatePicker

Prop
Type
Default
Description
label
string
-
Label text.
labelStyle
"inside" | "outside"
'outside'
Whether the label is placed inside or outside the input box. Default is 'outside'.
helperText
string
-
Supporting text displayed below the field.
error
boolean
-
If true, the field will be in error state.
leadingIcon
React.ReactNode
-
Icon to display at the start of the field. Default is Calendar icon if outside label.
placeholder
string
'Select date'
Placeholder text when no date is selected.
value
Date
-
Current selected date.
defaultValue
Date
-
Default date for uncontrolled mode.
onChange
((date: Date) => void)
-
Callback when the date changes.
disabled
boolean
-
If true, the picker is disabled.
className
string
-
Additional class name.
style
React.CSSProperties
-
Additional styles.
minDate
Date
-
Minimum selectable date.
maxDate
Date
-
Maximum selectable date.
dateFormat
string
'dd/MM/yyyy'
Date format string (date-fns pattern). Default is 'dd/MM/yyyy'.
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.
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

Label Styles

Labels can be placed outside (default) or inside the field.

Inside Label
Label Styles
<DatePicker label="Outside Label" />
<DatePicker label="Inside Label" labelStyle="inside" />

Min & Max Dates

Restrict the selection range to a specific period.

Min & Max Dates
const minDate = new Date();
const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 7);

<DatePicker 
  label="Next 7 Days" 
  minDate={minDate} 
  maxDate={maxDate} 
/>

States

Support for error and disabled states.

This date is invalid
States
<DatePicker label="Error" error helperText="This date is invalid" />
<DatePicker label="Disabled" disabled />

Sheet Presentation

Force the DateSheet presentation for testing mobile behavior on any viewport.

Sheet Presentation
<DatePicker
  label="Travel Date"
  sheetTitle="Select travel date"
  presentation="sheet"
  value={date}
  onChange={setDate}
/>

Width & Full Width

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

Width & Full Width
<DatePicker label="Fixed Width" width="200px" />
<DatePicker label="Standard Fixed" fullWidth={false} />

On this page

Preview
Component API
Variants
Label Styles
Min & Max Dates
Sheet Presentation
States
Photonix UI - React Components, Templates & Figma Design System