DateTimeInput

A day and a time in one field, such as a reminder or a release. Pass a ZonedDateTime to show the time zone.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Remind me

11202026930AM

Release

mmddyyyy––––

Times are in your local time zone

Remind me

11202026930AM

Release

mmddyyyy––––

Times are in your local time zone

Remind me

11202026930AM

Release

mmddyyyy––––

Times are in your local time zone

tsx

import { DateTimeInput } from '@skribly/ui/forms'

tsx

<DateTimeInput label="Remind me" defaultValue={parseDateTime('2026-11-20T09:30')} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The hour and minute segments take digits or arrow keys; the hour cycle follows the locale unless hourCycle is set.
The calendar stays open after picking a day, so the time can be checked before closing with Escape.

This demo runs through axe in all three themes on every test run. See what the tests check.