AddThisFeature
Sign in

Date and Time Display Component

Render every date and time through one component so none of them are ambiguous.

moderate User Experience

What it adds

A single shared way of displaying dates and times, covering absolute format, time zone, and optional relative phrasing.

What your agent is told to do

5
  1. 1

    Find every place the app renders a date or a time — tables, activity feeds, audit logs, exports, emails, tooltips — and route them all through one display path rather than formatting at each call site.

  2. 2

    Never render an all-numeric date whose day and month could be swapped. Spell or abbreviate the month, or use an unambiguous ordering consistently, because a reader has no way to tell 04/07 from 07/04.

  3. 3

    State the time zone whenever the value is a specific moment rather than a calendar day, and be explicit about whose zone it is — the viewer's, the record's, or the account's — rather than leaving it implied.

  4. 4

    Where a relative phrase is shown, keep the exact timestamp reachable on hover, on focus, and to assistive technology, so nobody has to guess what two months ago means.

  5. 5

    Do not compute relative phrasing during server rendering. The server and the browser will disagree about now, producing a mismatch on hydration and a value that is already wrong when it reaches the page.

Edge cases it handles

7
  • All-numeric dates are read differently in different regions, and a date that could be either is worse than a longer one that is clear.
  • A missing, null, or unparseable value must render a defined placeholder rather than an error string or a date at the epoch, and a timestamp in the future must not be phrased as though it has already happened.
  • Relative phrasing misleads at both extremes: last week is fine, three years ago on a legal record is not. Use absolute format past a defined threshold and always keep the exact value available.
  • Server-rendered output must be stable and identical to the first client render; anything depending on the current time has to settle after mount.
  • A date-only value has no time zone and must not be shifted by one. Converting a birthday or an invoice date into the viewer's zone moves it by a day.
  • Relative labels must update while the page stays open, without a timer per row on a long list.
  • Numeric quantities, counts, and percentages are handled by Number Formatting Component; this component owns only temporal values.

Definition of done

8
  • Every date and time in the app renders through the shared component.
  • No displayed date can be read as two different calendar dates.
  • Moments in time carry an explicit time zone and a stated frame of reference.
  • The exact timestamp is available wherever a relative phrase is shown, including to screen readers.
  • Null, invalid, and future values render defined states rather than errors or nonsense.
  • Server-rendered and client-rendered output match on first paint.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.