Component Catalog
DateTimeInput
Date, time, or datetime input with auto-detection.
A2UI → Nuxt UI Mapping
| enableDate | enableTime | HTML Input Type | Result |
|---|---|---|---|
true (default) | false (default) | date | Date picker |
false | true | time | Time picker |
true | true | datetime-local | Full datetime picker |
Uses UInput with the appropriate type attribute.
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"dt_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"dt_demo","components":[
{"id":"root","component":"Column","children":["date_only","time_only","both"]},
{"id":"date_only","component":"DateTimeInput","label":"Date","value":"2026-02-14","enableDate":true},
{"id":"time_only","component":"DateTimeInput","label":"Time","value":"14:30","enableTime":true,"enableDate":false},
{"id":"both","component":"DateTimeInput","label":"Date & Time","value":"2026-02-14T14:30","enableDate":true,"enableTime":true}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | ✅ | "" | Current value (ISO format) |
enableDate | boolean | — | true | Show date input |
enableTime | boolean | — | false | Show time input |
min | string | — | — | Minimum allowed value |
max | string | — | — | Maximum allowed value |
label | string | — | — | Label above the input |
Try It
Copy the JSONL above and paste it in the Playground Paste tab.