DT-3307 - add custom timestamp formats

[rossedfort]

Description & motivation 💭

• Allow users to select from 3 timestamp formats: short, medium, and long
• Create <Timestamp /> component to minimize direct calls to formatDate

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

• Manual testing
• E2E tests added
• Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
holocene	Ready	Preview	Comment	Nov 18, 2025 8:11pm

[Alex-Tideman]

Wondering if we should use 'full' | 'long' | 'medium' | 'short' and map to Intl.DateTimeFormat. What I don't know is if our timezone's locale map correctly.

new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "November 17, 2025"

// Short date
new Intl.DateTimeFormat('en-US', {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit'
}).format(new Date()); // "11/17/25"

// Date + Time
new Intl.DateTimeFormat('en-US', {
  dateStyle: 'short',
  timeStyle: 'short'
}).format(new Date()); // "11/17/25, 2:30 PM"
Key options:

dateStyle: 'full' | 'long' | 'medium' | 'short'
timeStyle: 'full' | 'long' | 'medium' | 'short'

[rossedfort]

Fixed. date formats now are:

11/18/25, 09:59:16.00 MST
Nov 18, 2025, 09:59:35.00 MST
November 18, 2025 at 9:59:43.00 AM MST

The short and medium formats use 24 hour clock, so PM times will be 12, 13, 14, etc. and no AM/PM indicator.

[Alex-Tideman]

What is the default? Medium? Just might be weird for us 12-hour folks to have that now be 24

[rossedfort]

Yes, medium is the default. It was that way before, right? https://github.com/temporalio/ui/blob/main/src/lib/utilities/format-date.ts#L18

HH is 24 clock https://date-fns.org/v4.1.0/docs/format

[rossedfort]

I'm good with either 24 or 12, although I think you're right that 12 might make more sense for most folks. Just was trying to keep things somewhat aligned with the previous implementation.

[Alex-Tideman]

Can we do it based on locale? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#hour12

[rossedfort]

I guess leaving hour12 unspecified would do it based on locale, we can do that.