ComponentsFormDatePicker

DatePicker

Calendar · DatePicker input · DateRangePicker · 4 variants · presets · time picker

Calendar variantsPresetsDatePickerSizesStatesDate+timeDateRangePickerDual month

Overview

Calendar · DatePicker input · DateRangePicker · 4 variants · presets · time picker

Default date picker

Live preview

Use a date picker when people benefit from choosing a date from calendar context.

Choose the date when work must be complete

App.tsx
tsx
import { DatePicker } from 'omverse-ui'
 
const [dueDate, setDueDate] = useState<Date | null>(null)
 
<DatePicker
label="Project due date"
helperText="Choose the date when work must be complete"
value={dueDate}
onChange={setDueDate}
/>

Use explicit labels and preserve the selected date in a locale-appropriate format. Use DateRangePicker when the task requires both a start and end date.

Constrain unavailable dates in the calendar and explain the constraint instead of allowing an invalid selection.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose DatePicker when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Calendar variants

Live preview

Four visual styles: default, dark, gradient, and minimal

default

August 2026
Su
Mo
Tu
We
Th
Fr
Sa

dark

August 2026
Su
Mo
Tu
We
Th
Fr
Sa

gradient

August 2026
Su
Mo
Tu
We
Th
Fr
Sa

minimal

August 2026
Su
Mo
Tu
We
Th
Fr
Sa
App.tsx
tsx
import { Calendar } from 'omverse-ui'
 
<Calendar variant="default" value={date} onChange={setDate} />
<Calendar variant="dark" value={date} onChange={setDate} />
<Calendar variant="gradient" value={date} onChange={setDate} />
<Calendar variant="minimal" value={date} onChange={setDate} />

With quick presets

Live preview

quickPresets adds shortcut buttons beside the calendar

August 2026
Su
Mo
Tu
We
Th
Fr
Sa
App.tsx
tsx
<Calendar value={date} onChange={setDate} presets />

DatePicker input

Live preview

Dropdown-based date picker — with helper text, error, required, and disabled states

Select the project start date

Please select a due date

App.tsx
tsx
import { DatePicker } from 'omverse-ui'
 
const [date, setDate] = useState<Date | null>(null)
 
{/* Default */}
<DatePicker label="Date" value={date} onChange={setDate} />
 
{/* With helper text */}
<DatePicker label="Start date" helperText="Select the project start date" value={date} onChange={setDate} />
 
{/* With error */}
<DatePicker
label="Due date"
error={!date}
errorText="Please select a due date"
value={date}
onChange={setDate}
/>
 
{/* Disabled */}
<DatePicker label="Locked date" disabled value={date} onChange={setDate} />

DatePicker with presets

Live preview

quickPresets prop adds shortcut buttons inside the dropdown

App.tsx
tsx
<DatePicker label="Date" value={date} onChange={setDate} presets />

Sizes

Live preview

sm, md (default), and lg trigger heights

App.tsx
tsx
<DatePicker label="Small" size="sm" value={date} onChange={setDate} />
<DatePicker label="Medium (default)" size="md" value={date} onChange={setDate} />
<DatePicker label="Large" size="lg" value={date} onChange={setDate} />

States

Live preview

Default, error, disabled, disable weekends, and min date

Invalid date

App.tsx
tsx
{/* Default */}
<DatePicker label="Date" value={date} onChange={setDate} />
 
{/* Error */}
<DatePicker label="Date" error errorText="Invalid date" value={date} onChange={setDate} />
 
{/* Disabled */}
<DatePicker label="Date" disabled value={date} onChange={setDate} />
 
{/* Disable weekends */}
<DatePicker label="Weekdays only" disableWeekends value={date} onChange={setDate} />
 
{/* Min date */}
<DatePicker label="From today" minDate={new Date()} value={date} onChange={setDate} />

Date + time

Live preview

showTime adds a time picker below the calendar grid

App.tsx
tsx
<DatePicker label="Date & time" showTime value={date} onChange={setDate} />

Date range picker

Live preview

DateRangePicker for selecting a start and end date — dualMonth shows two months

Start dateEnd date
Start dateEnd date
App.tsx
tsx
import { DateRangePicker } from 'omverse-ui'
 
const [range, setRange] = useState<[Date | null, Date | null]>([null, null])
 
<DateRangePicker label="Date range" value={range} onChange={setRange} />
<DateRangePicker label="Dual month view" value={range} onChange={setRange} dualMonth />

Calendar props

DatePicker props

DateRangePicker props

Props / API

Api Props

Props

PropTypeDefaultDescription
valueDate | null—Controlled selected date
onChange(date: Date) => void—Callback fired when a date is selected
variant'default' | 'dark' | 'gradient' | 'minimal''default'Visual style of the calendar
presetsbooleanfalseShows preset shortcut buttons beside the calendar
disableWeekendsbooleanfalseMakes Saturday and Sunday unselectable
minDateDate—Earliest selectable date
maxDateDate—Latest selectable date
showTimebooleanfalseAdds a time picker below the calendar grid
valueDate | null—Controlled selected date
onChange(date: Date | null) => void—Callback fired when a date is selected
labelstring—Label shown above the input
placeholderstring—Placeholder text
helperTextstring—Helper text shown below the input
errorbooleanfalseError state
errorTextstring—Error message
size'sm' | 'md' | 'lg''md'Trigger input height
disabledbooleanfalseDisables the picker
presetsbooleanfalseShows preset shortcut buttons in the dropdown
disableWeekendsbooleanfalseMakes Saturday and Sunday unselectable
minDateDate—Earliest selectable date
maxDateDate—Latest selectable date
showTimebooleanfalseAdds a time picker below the calendar
value[Date | null, Date | null]—Controlled date range
onChange(range: [Date | null, Date | null]) => void—Callback fired when the range changes
labelstring—Label shown above the input
size'sm' | 'md' | 'lg''md'Trigger input height
disabledbooleanfalseDisables the range picker
presetsbooleanfalseShows preset shortcut buttons in the dropdown
dualMonthbooleanfalseShows two months side by side
disableWeekendsbooleanfalseMakes Saturday and Sunday unselectable
minDateDate—Earliest selectable date
maxDateDate—Latest selectable date