DateTimePicker
A full date picker plus a full time picker side by side, with their own popups. Either half committing updates the combined hidden input to a"YYYY-MM-DDTHH:MM" value. No combined change event fires; the child ink:date:change andink:time:change events bubble naturally.
Example
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Hour
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Minute
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
<DateTimePicker
id="event-start"
label="Event start"
name="event-start"
month="2026-09"
locale="en-GB"
/>The locale is set so day names render in English (formatLong follows the runtime default locale otherwise). Pick a day, then an hour and a minute: the hidden input combines them ("2026-09-12T09:30"). Clearing either half empties the combined value. month pins the date half's calendar; omit it to open on the selected value, or on today.
Preselected value
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Hour
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Minute
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
<DateTimePicker
id="event-start-set"
label="Event start"
name="event-start-set"
value="2026-09-12T09:30"
month="2026-09"
locale="en-GB"
/>A value in "YYYY-MM-DDTHH:MM" form splits into the date and time halves server-side. Anything else (missingT, an impossible date, a bad time) leaves both halves empty — the value is never half-filled. Each half keeps its own label ("Event start: date" / "Event start: time") and popup; the group label never renders a for attribute, so no wrapping Field is used.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Required. Names the group label/message ids; children get "{id}-date" / "{id}-time" (triggers themselves carry no id). |
label | string | - | Group label; children are labelled "{label}: date" and "{label}: time". |
name | string | id | Hidden-input form name; carries the combined "YYYY-MM-DDTHH:MM" value. Children render no hidden input of their own. |
value | string ("YYYY-MM-DDTHH:MM") | - | Initial combined value, split server-side; malformed values leave both halves empty. |
min | string (ISO) | - | Earliest selectable date on the date half; earlier days render disabled. |
max | string (ISO) | - | Latest selectable date on the date half; later days render disabled. |
month | string ("YYYY-MM") | - | Initial calendar month for the date half; falls back to the value month, then today. |
locale | string | - | BCP 47 locale for day and month names; runtime default when omitted. |
hint | string | - | Help text below the pair. |
error | string | - | Error message below the pair. |
disabled | boolean | false | Non-interactive; neither trigger can open. |
class | string | - | Style passthrough. |
Accessibility
- The pair is a group labelled by the group label; each half is a fully labelled DatePicker / TimePicker trigger with its own dialog, keyboard map, Escape, and click-away behavior.
- Hint and error connect via
aria-describedbyon the group. - No combined change event is dispatched — listen for the bubbling child
ink:date:change/ink:time:changeevents with{ value }(empty when cleared).