Date & time picker

Clinical time is not calendar time. It carries a timezone, it cannot run forwards, it has two ambiguous hours a year, and getting it wrong changes what a trend means.

Overview

Almost every clinical decision this system supports is a decision about change over time: ST elevation compared with a prior, troponin across a 0/1 h interval, how long a patient has waited. All of it rests on timestamps being unambiguous, ordered and correctly zoned — and a picker is where a human introduces the error.

Anatomy

Format

• 24-hour time. 14:26, never 2:26 PM. Removes the am/pm class of error entirely.
• Seconds where clinically relevant. ECG acquisition and alarm timestamps carry seconds; an appointment does not.
• Never abbreviate a month to letters. "Aug" does not translate and sorts wrongly.
• Tabular numerals, so timestamps align in a column — see Typography.

Timezone is part of the value

A clinical timestamp without a zone is not a timestamp. Three rules:

• Store UTC, display local, name the zone. The displayed zone is stated beside the value or in the field hint — never assumed from the browser without saying so.
• Display in the zone of the site of care, not the reader's. A cardiologist reviewing from another country must see the times the ward saw, or every interval they compute is wrong.
• Never mix zones in one view. If a record genuinely spans sites, each timestamp carries its zone explicitly and the mixing is stated.

Constraints

Constraints are stated before entry, not after. A hint reading "not in the future" costs nothing; discovering it after typing costs a re-entry at the worst moment.

Relative and absolute time

"4 min ago" is easier to read and harder to verify. The rule follows the consequence:

• Relative time for elapsed duration a clinician is monitoring — waiting time in a queue, countdown to a re-alert. It answers "how long", which is the actual question.
• Absolute time for anything recorded — acquisition, acknowledgement, assessment, notification. The audit trail is absolute, always, with seconds.
• Never relative alone on a clinical event. Where relative is shown for readability, the absolute time sits beside it: 4 min ago · 14:26:38.
• Relative time updates live, or it is a lie within a minute — but the update never animates and never reflows the row.

Do's and don'ts

Accessibility

• The text input is the control; the calendar supplements it. A picker that can only be operated by clicking a grid is unusable for many keyboard and switch users, and slow for everyone who knows the date.
• Full keyboard grid — arrows move by day, Page Up/Down by month, Home/End to week bounds, Esc closes and returns focus to the field.
• Each day has a full accessible name — "Tuesday 11 August 2026", not "11" — and disabled days announce why.
• Today and selected are visually distinct and distinguished by more than colour: today by border, selection by fill plus weight.
• Touch targets obey the physical floor from Scaling, which on a cart means a larger calendar, not smaller days.
• Never type="date" alone where the format matters — its rendering and behaviour vary by browser and locale, which is precisely the ambiguity this page exists to remove.

Outcomes of use

What this contributes to, in the terms of Usability & context of use. These are attributes believed to contribute to an outcome; the outcome itself is settled by observing real use in a specified context, not by this page.

• Effectiveness — the recorded moment is the moment that happened. Every interval, trend and audit entry downstream depends on it.
• Efficiency — typing a known date beats navigating to it. The calendar exists for the cases where the clinician is counting backwards from today.
• Satisfaction — no second-guessing whether the field meant day-month or month-day, which is a small, constant tax in any multinational deployment.

Clinical safety notes

• ISO 8601 and 24-hour only. Mitigates: day/month transposition and am/pm error — the two most common date entry faults in multinational deployments.
• Timezone named and stored as UTC. Mitigates: intervals computed across zones being wrong by hours.
• Ambiguous DST hour resolved by asking. Mitigates: an interval appearing to run backwards, or a duplicate-hour sample being ordered wrongly.
• Observations cannot be future-dated. Mitigates: an impossible timestamp corrupting a trend or an audit sequence.
• Constraints stated before entry. Mitigates: re-entry under time pressure.
• Absolute time on every recorded event. Mitigates: an audit trail that cannot be reconstructed later.
• Range order corrected explicitly, never silently. Mitigates: a trend window inverted without the clinician knowing.

Implementation

$ npx shadcn@latest add https://md.notjustany.tech/r/date-picker.json

<DateTimeField
  label="ECG acquired"
  kind="observation"        // disallows future values
  precision="second"
  zone="Europe/Vienna"       // site of care, not the reader's browser
  value={value}                // always UTC on the wire
  onChange={setValue}
/>

// Timezone is not optional, because a clinical timestamp without one
// is not a timestamp.
if (!zone) {
  throw new Error(
    "[DateTimeField] `zone` is required. Pass the site of care's zone — " +
    "never infer it from the reader's browser."
  )
}

Related

• Text field — the input underneath, and its validation rules.
• Patient header — the same date formatting.
• Typography — tabular numerals.
• Clinician override — where absolute timestamps land.