Zetta v1.6

Components · Forms & selection

Date-time picker

A date field and a time field paired into one control for a single moment — a deadline, an event start. Each field uses the base input surface with a trailing affordance icon (calendar, clock), joined by a quiet separator.

Preview

at

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Date-time picker" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `date-time-picker` spec (variants: date-input, time-input) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `date-time-picker` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

[  2024-01-15  📅  ]  at  [  09:30  🕐  ]
        ↑                          ↑
  datetime-picker-date-input  datetime-picker-time-input
                        ↑
              datetime-picker-separator ("at" or "–")

Parts:

  • Date input — standard input token + trailing calendar_today icon → opens calendar popover
  • Separator — {colors.muted} text ("at" or "–"), {spacing.xs} horizontal padding
  • Time input — standard input token + trailing schedule icon → opens time picker popover
  • Field wrapper — standard field token wrapping both inputs as a single logical field

Combines Date Picker + Time Picker. Each sub-field has its own state. See Date Picker and Time Picker for individual field states.

State Visual
Default (empty) Both date and time fields show placeholder
Date focused Calendar panel opens
Time focused Time picker panel opens
Both filled Full datetime value shown
Disabled Both fields disabled
Error One or both fields show error state

When to use

  • Scheduling events, setting deadlines, or any context requiring a specific moment in time.

When not to use

Do

  • Treat the pair as a single logical field — one label, one error message below the pair.
  • Show the field error only after both inputs have been touched.

Don't

  • Don't show separate error messages below each individual input — the pair is one field.
  • Don't require the user to complete date before time or vice versa.
  • Display format: date and time separated by a space: "25 Jun 2026 14:30".
  • Label the field clearly: "Appointment date & time", "Scheduled at".
  • Error: specify which part failed — "Date is required." or "Time is required."

Keyboard

Key Behavior
Tab Move focus to date input, then time input
Enter / Space Open the respective picker panel
Escape Close the open panel without selecting

Accessibility

  • Field label: one <label> associated with the date input via for; time input uses aria-label ("Time").
  • Error: role="alert" on the combined field-error element.
  • Announce: combined value on close — "Date and time selected: January 15 2024, 09:30".

Spec

Values and token references resolved straight from the Zetta spec.

datetime-picker-date-input
trailingIcon
calendar_today
trailingIconSize
{icons.sizeMap.md}
trailingIconColor
{colors.muted}
datetime-picker-time-input
trailingIcon
schedule
trailingIconSize
{icons.sizeMap.md}
trailingIconColor
{colors.muted}
datetime-picker-separator
textColor
{colors.muted}
fontFamily
Geist
fontSize
14px
paddingX
{spacing.xs}

Known gaps

  • Timezone display and conversion — product-level concern, not in scope for design tokens.
  • Single combined popover (calendar + time in one panel) — not yet evaluated.