Components / Date Time Picker
Date Time Picker
Composite date + time picker. Combines cg-date-picker and cg-time-picker with an ISO datetime value.
forms v0.5.0
Playground
Examples
Basic
<cg-date-time-picker label="Event start" style="max-width: 420px;"></cg-date-time-picker>With value
<cg-date-time-picker label="Deadline" value="2026-04-06T14:30" style="max-width: 420px;"></cg-date-time-picker>12h + 15min
<cg-date-time-picker label="Meeting" use12h step="15" style="max-width: 420px;"></cg-date-time-picker>Import
import { CgDateTimePicker } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-date-time-picker';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text above the pickers |
value | string | — | ISO datetime value (YYYY-MM-DDTHH:MM) |
datePlaceholder | string | "Select date" | Date picker placeholder |
timePlaceholder | string | "Select time" | Time picker placeholder |
helper | string | — | Helper text below pickers |
step | number | 5 | Minute step interval |
use12h | boolean | false | 12-hour format with AM/PM |
size | "md" | "lg" | "md" | Size — md (48px), lg (56px) |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius |
error | boolean | false | Error state |
success | boolean | false | Success state |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-change | {value: string, date: string, time: string} | When date or time changes |