# DateTimePicker

> Date field with calendar plus a 24h time field, as one value.

Source: https://ui.jcsoftdev.com/docs/components/date-time-picker

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

```ts
import { DateTimePicker } from "@jcsoftdev/ui/forms";
```

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

## Usage

```tsx
<DateTimePicker aria-label="Start date" defaultValue="2026-09-07" />
```

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

- [Default](/storybook/?path=/story/forms-datepicker--default)
- [English Writes Month First](/storybook/?path=/story/forms-datepicker--english-writes-month-first)
- [Typing Commits Only Real Dates](/storybook/?path=/story/forms-datepicker--typing-commits-only-real-dates)
- [Pick From Calendar With Keyboard](/storybook/?path=/story/forms-datepicker--pick-from-calendar-with-keyboard)
- [Escape Closes Without Change](/storybook/?path=/story/forms-datepicker--escape-closes-without-change)
- [Min Max And Disabled Dates](/storybook/?path=/story/forms-datepicker--min-max-and-disabled-dates)
- [Clearable](/storybook/?path=/story/forms-datepicker--clearable)
- [Inside Field And Form](/storybook/?path=/story/forms-datepicker--inside-field-and-form)
- [Controlled](/storybook/?path=/story/forms-datepicker--controlled)
- [Disabled](/storybook/?path=/story/forms-datepicker--disabled)
- [Date Time](/storybook/?path=/story/forms-datepicker--date-time)
- [Date Time Inside Field](/storybook/?path=/story/forms-datepicker--date-time-inside-field)

## Source

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