Uiplex

DateTimePicker

Date, time, or combined datetime picker with date-only, time-only, and datetime modes.

Date Only

import { DateTimePicker } from 'uiplex';

<DateTimePicker mode="date" value={date} onChange={setDate} />

Time Only

<DateTimePicker mode="time" value={time} onChange={setTime} />

Date and Time

<DateTimePicker mode="datetime" value={datetime} onChange={setDatetime} />

Sizes

<DateTimePicker mode="date" size="sm" />
<DateTimePicker mode="date" size="md" />
<DateTimePicker mode="date" size="lg" />

With Min/Max

<DateTimePicker mode="date" min="2025-01-01" max="2025-12-31" />

API Reference

PropTypeDefaultDescription
mode"date" | "time" | "datetime""date"Picker mode
size"sm" | "md" | "lg""md"Width and padding size
valuestring-Controlled value (ISO-like string)
defaultValuestring-Uncontrolled initial value
onChange(value: string) => void-Value change handler
minstring-Min date/time
maxstring-Max date/time
disabledbooleanfalseDisable the input