Photonix

DatePicker

A premium input for selecting dates with a calendar popover.

Preview

Usage
"use client";

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

export default function DatePickerBasicExample() {
    return (
        <DatePicker
            label="Start date"
            defaultValue={new Date('2026-06-02T00:00:00')}
            dateFormat="dd/MM/yyyy"
            width={360}
        />
    );
}

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
"use client";

import { DatePicker, Flex } from '@photonix/ultimate';

export default function DatePickerLabelsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <DatePicker label="Outside Label" />
            <DatePicker label="Inside Label" labelStyle="inside" />
        </Flex>
    );
}

Min & Max Dates

Restrict the selection range to a specific period.

Min & Max Dates
"use client";

import { DatePicker, Flex } from '@photonix/ultimate';

export default function DatePickerMinMaxExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <DatePicker label="Next 7 Days" minDate={new Date()} maxDate={new Date(new Date().setDate(new Date().getDate() + 7))} />
        </Flex>
    );
}

States

Support for error and disabled states.

This date is invalid
States
"use client";

import { DatePicker, Flex } from '@photonix/ultimate';

export default function DatePickerStatesExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <DatePicker label="Error" helperText="This date is invalid" error />
            <DatePicker label="Disabled" disabled />
        </Flex>
    );
}

Sheet Presentation

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

Sheet Presentation
"use client";

import { DatePicker, Flex } from '@photonix/ultimate';

export default function DatePickerSheetExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <DatePicker label="Travel Date" sheetTitle="Select travel date" presentation="sheet" defaultValue={new Date('2026-06-02T00:00:00')} />
        </Flex>
    );
}

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
"use client";

import { DatePicker, Flex } from '@photonix/ultimate';

export default function DatePickerWidthExample() {
    return (
        <Flex direction="column" gap="md" w="100%">
            <DatePicker label="Fixed Width" width="200px" />
            <DatePicker label="Standard Fixed" fullWidth={false} />
        </Flex>
    );
}

On this page

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