DateTimeField

DateTimeField is a compound component for combined date and time entry that coordinates typed input, optional calendar selection, and timestamp rules in one field.

Storybook Source

Overview

DateTimeField styling is split across the inherited TextField surface, the popover-mounted calendar, and a small local contract on DateTimeFieldTriggerIconButton.

Public CSS Variables

Starts at

Variable	Value	Affects
Keeps the trigger aligned with input height.`DateTimeFieldTriggerIconButton`		No visible change in this state
Trigger icon color.`DateTimeFieldTriggerIconButton`		No visible change in this state
Hover background for the trigger.`DateTimeFieldTriggerIconButton`		No visible change in this state
Trigger icon color on hover.`DateTimeFieldTriggerIconButton`		No visible change in this state
Trigger icon color while pressed.`DateTimeFieldTriggerIconButton`		No visible change in this state
Trigger background while pressed.`DateTimeFieldTriggerIconButton`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

DateTimeField: inherits most visuals from TextField.
DateTimeFieldInput: follows the same field surface model as other text-entry controls.
DateTimeFieldTriggerIconButton: uses local button variables backed by theme tokens.
DateTimeFieldCalendar: follows Calendar and Popover styling contracts.

State And Variant Interaction

Disabled state should dim the input and trigger together.
Error styling should come from the surrounding field state.
Time-specific semantics should remain readable even when the control is compressed into dense forms.

Examples

.scheduleTrigger {
  --button-color: var(--label-secondary);
  --button-background-color-hover: var(--fills-secondary-hover);
}

.compactScheduleTrigger {
  --icon-button-size: 32px;
}

Children of DateTimeFieldTriggerIconButton replace its default calendar icon; the button keeps its size, states and accessible name.

LTRRTL

custom-trigger-icon.tsx · 71 lines

import { CalendarDaysIcon } from '@vega-ui/icons';
import {
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

Do Not Override

Do not hide focus or invalid states with custom trigger colors.
Do not use this file to restyle the calendar layer; use Calendar and Popover contracts instead.
Do not replace semantic theme tokens with raw palette values in field-level overrides.