Skip to content
@jcsoftdev/ui

DateTimePicker

Open .md
Live preview

Loading example…

Date field with calendar plus a 24h time field, as one value. Replaces <input type="datetime-local">; the value is “YYYY-MM-DDTHH:mm” without a time zone.

Import

Section titled “Import”
import { DateTimePicker } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/date-picker.

Usage

Section titled “Usage”
<DateTimePicker aria-label="Start date" defaultValue="2026-09-07" />

Props

Section titled “Props”
Prop Type Default Description
value string “YYYY-MM-DDTHH:mm” (controlled), a wall-clock date and time with no zone: the component never converts it, so “2026-09-07T09:30” stays that string whatever the browser’s time zone is. "" while either half is missing or the pair is outside min/max.
defaultValue string ""
onValueChange ((value: string) => void)
min string Earliest allowed value: a date (“2026-09-07”, whole day) or a date-time.
max string Latest allowed value: a date (whole day) or a date-time.
isDateDisabled ((date: string) => boolean)
locale string
weekStartsOn 0 | 2 | 1 | 4 | 3 | 5 | 6
step number Minutes moved by ArrowUp / ArrowDown on the minutes of the time half. Default 5.
name string Submits the combined value with a surrounding <form> through a hidden input.
id string
disabled boolean
required boolean
invalid boolean
aria-label string
aria-labelledby string
aria-describedby string Identifies the element (or elements) that describes the object.
aria-invalid boolean | "true" | "false" Indicates the entered value does not conform to the format expected by the application.
container HTMLElement | null
material "solid" | "glass" | "glass-clear" | "liquid" | "liquid-clear"
size "sm" | "md" "md" Height of both halves: sm is 30px and md (default) 38px, like Button and Input.
classNames Partial<Record<DateTimePickerPart, string>> Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

Section titled “Storybook stories”

Source

Section titled “Source”

packages/ui/src/forms/date-picker/date-time-picker.tsx