ComponentsFormDatePicker

DatePicker

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

Calendar variantsPresetsDatePickerSizesStatesDate+timeDateRangePickerDual month

Calendar variants

Live preview

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

default

May 2026

dark

May 2026

gradient

May 2026

minimal

May 2026

App.tsx

tsx

1import { Calendar } from 'omverse-ui'
2 
3<Calendar variant="default"   value={date} onChange={setDate} />
4<Calendar variant="dark"      value={date} onChange={setDate} />
5<Calendar variant="gradient"  value={date} onChange={setDate} />
6<Calendar variant="minimal"   value={date} onChange={setDate} />

With quick presets

Live preview

quickPresets adds shortcut buttons beside the calendar

May 2026

App.tsx

tsx

1<Calendar value={date} onChange={setDate} presets />

DatePicker input

Live preview

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

Date

Start date

Select the project start date

Due date

Please select a due date

Locked date

App.tsx

tsx

1import { DatePicker } from 'omverse-ui'
2 
3const [date, setDate] = useState<Date | null>(null)
4 
5{/* Default */}
6<DatePicker label="Date" value={date} onChange={setDate} />
7 
8{/* With helper text */}
9<DatePicker label="Start date" helperText="Select the project start date" value={date} onChange={setDate} />
10 
11{/* With error */}
12<DatePicker
13  label="Due date"
14  error={!date}
15  errorText="Please select a due date"
16  value={date}
17  onChange={setDate}
18/>
19 
20{/* Disabled */}
21<DatePicker label="Locked date" disabled value={date} onChange={setDate} />

DatePicker with presets

Live preview

quickPresets prop adds shortcut buttons inside the dropdown

Date

App.tsx

tsx

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

Sizes

Live preview

sm, md (default), and lg trigger heights

Small

Medium (default)

Large

App.tsx

tsx

1<DatePicker label="Small"          size="sm" value={date} onChange={setDate} />
2<DatePicker label="Medium (default)" size="md" value={date} onChange={setDate} />
3<DatePicker label="Large"          size="lg" value={date} onChange={setDate} />

States

Live preview

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

Date

Invalid date

Date

Weekdays only

From today

App.tsx

tsx

1{/* Default */}
2<DatePicker label="Date" value={date} onChange={setDate} />
3 
4{/* Error */}
5<DatePicker label="Date" error errorText="Invalid date" value={date} onChange={setDate} />
6 
7{/* Disabled */}
8<DatePicker label="Date" disabled value={date} onChange={setDate} />
9 
10{/* Disable weekends */}
11<DatePicker label="Weekdays only" disableWeekends value={date} onChange={setDate} />
12 
13{/* Min date */}
14<DatePicker label="From today" minDate={new Date()} value={date} onChange={setDate} />

Date + time

Live preview

showTime adds a time picker below the calendar grid

Date & time

App.tsx

tsx

1<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

Date range

Start dateEnd date

Dual month view

Start dateEnd date

App.tsx

tsx

1import { DateRangePicker } from 'omverse-ui'
2 
3const [range, setRange] = useState<[Date | null, Date | null]>([null, null])
4 
5<DateRangePicker label="Date range"       value={range} onChange={setRange} />
6<DateRangePicker label="Dual month view"  value={range} onChange={setRange} dualMonth />

Calendar 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

DatePicker props

Props

PropTypeDefaultDescription

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

DateRangePicker props

Props

PropTypeDefaultDescription

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