API reference
Full props for the DateTimePicker component.
All props are optional unless noted. Import the component and types from the package root:
import { DateTimePicker } from "react-smart-datetime";
import type { DateTimePickerProps, DateRange, Preset } from "react-smart-datetime";
| Prop | Type | Default | Description |
|---|
value | Date | null | — | Controlled value (single mode) |
defaultValue | Date | null | null | Uncontrolled initial value |
onChange | (date: Date | null) => void | — | Single-mode change callback |
rangeValue | DateRange | — | Controlled range |
defaultRangeValue | DateRange | {start:null,end:null} | Uncontrolled initial range |
onRangeChange | (range: DateRange) => void | — | Range change callback |
| Prop | Type | Default | Description |
|---|
mode | "datetime" | "date" | "time" | "datetime" | What to pick |
range | boolean | false | Two-endpoint range selection |
inline | boolean | false | Render inline instead of a popover |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Open-state callback |
disabled | boolean | false | Disable the control |
readOnly | boolean | false | Show value, block edits |
clearable | boolean | true | Show a clear button |
closeOnSelect | boolean | auto | Close after a selection completes |
monthsToShow | 1 | 2 | 3 | 1 | Side-by-side month grids |
showWeekNumbers | boolean | false | ISO week-number column |
showTodayButton | boolean | true | "Today" footer shortcut |
showFooter | boolean | true | Show the footer row |
| Prop | Type | Default | Description |
|---|
minDate | Date | — | Earliest selectable date |
maxDate | Date | — | Latest selectable date |
disabledDates | Date[] | (date) => boolean | — | Dates to disable |
| Prop | Type | Default | Description |
|---|
minuteStep | number | 1 | Minute increment (divides 60) |
secondStep | number | 1 | Second increment (divides 60) |
showSeconds | boolean | false | Include seconds column |
use24Hour | boolean | false | 24-hour clock |
| Prop | Type | Default | Description |
|---|
locale | string | navigator.language | BCP-47 locale |
firstDayOfWeek | 0…6 | 0 | First weekday (0 = Sunday) |
dateFormat | Intl.DateTimeFormatOptions | short date | Input date format |
timeFormat | Intl.DateTimeFormatOptions | derived | Input time format |
timeZone | string | user TZ | IANA time zone |
showTimeZone | boolean | false | Show TZ label in footer |
| Prop | Type | Default | Description |
|---|
presets | Preset[] | — | Quick-select shortcuts |
theme | "light" | "dark" | "auto" | "light" | Color theme |
accentColor | string | — | Override accent color |
radius | string | — | Override border radius |
placement | "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-start" | Popover placement (auto-flips) |
placeholder | string | "Select…" | Empty-state text |
className / style | — | — | Root element styling |
id / name | string | — | Forwarded to input / hidden input |
calendarIcon / clockIcon | ReactNode | — | Custom trigger icons |
portalContainer | HTMLElement | null | document.body | Popover portal target |
import {
DateTimePicker, // component (also the default export)
singleDatePresets, // Preset[]
rangePresets, // Preset[]
lastNDaysPreset, // (n, label?) => Preset
addDays, addMonths, addYears,
isSameDay, isSameMonth, isWithinRange,
startOfDay, startOfMonth,
} from "react-smart-datetime";