Date and time field

Overview

Choose a local or absolute date and time. It transforms operator input into a labeled domain value while preserving recoverable input through validation, delay and offline queuing.

When to use

Use HE/Date and time field when you need to choose a local or absolute date and time. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<label class="he-date-time"><span class="he-field__label">Start</span><span class="he-date-time__row"><input class="he-field__control" type="datetime-local"><span class="he-date-time__zone">Europe/Dublin</span></span></label>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Show timezone when operational meaning depends on it and permit typed input.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components