Component
DatetimeInput
Collects a date, time, or date-and-time as locale-aware masked text.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/datetime-inputExamples
Live previews render through the docs app's PandaCSS codegen.
<DatetimeInput aria-label="Date" />
<DatetimeInput aria-label="Time" mode="time" />
<DatetimeInput aria-label="Date and time" mode="datetime" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `value` | `Date \ | undefined` | No | - |
| `onChange` | `((date: Date \ | undefined) => void) \ | undefined` | No |
| `mode` | `DatetimeInputMode \ | undefined` | No | - |
| `locale` | `string \ | undefined` | No | - |
| `size` | `InputSize` | No | - | - |
| `invalid` | `boolean` | No | - | - |
| `disabled` | `boolean` | No | - | - |
| `className` | `string` | No | - | - |
| `id` | `string` | No | - | - |
| `'aria-label'` | `string \ | undefined` | No | - |
| `'aria-describedby'` | `string` | No | - | - |
| `endSlot` | `ReactNode` | No | - | Trailing content rendered inside the field (e.g. a calendar trigger). |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/datetime-input.json`
- Recipe: ``
- Files: `src/components/ui/datetime-input.tsx`