Skip to content

Feature Request: Timezone-aware datetime widget for dynamic time display

Problem Statement

Currently, time displays are static and show timestamps in a fixed timezone (e.g., "October 17, 2025 at 7:01:40 PM GMT+3"). This creates confusion for users in different timezones who need to manually calculate their local time.

Proposed Solution

Implement a timezone-aware datetime widget that automatically displays timestamps in the reader's local timezone while preserving the original timestamp data.

Technical Implementation

  • Leverage the existing HTML <time> element structure with datetime attribute
  • Use JavaScript to detect user's timezone via Intl.DateTimeFormat().resolvedOptions().timeZone
  • Convert and display the time in user's local timezone
  • Maintain accessibility with proper aria-label and title attributes

Example Usage

<!-- Server renders with UTC/original timezone -->
<time datetime="2025-10-17T16:01:40Z" class="timezone-widget">
  October 17, 2025 at 7:01:40 PM GMT+3
</time>

<!-- JavaScript converts to user's timezone -->
<time title="October 17, 2025 at 9:01:40 AM PDT" aria-label="October 17, 2025 at 9:01:40 AM PDT" datetime="2025-10-17T16:01:40Z" class="timezone-widget">
  October 17, 2025 at 9:01:40 AM PDT
</time>

Benefits

  • Improved user experience across global teams
  • Reduced timezone confusion and calculation errors
  • Maintains semantic HTML structure
  • Preserves accessibility standards
  • Progressive enhancement (fallback to original time if JS fails)

Acceptance Criteria

  • Widget detects user's timezone automatically
  • Displays time in user's local timezone format
  • Maintains original timestamp in datetime attribute
  • Updates title and aria-label for accessibility
  • Graceful fallback when JavaScript is disabled
  • Consistent formatting across the application
  • Copy pasting <time> selections retains the attributes
Edited by 🤖 GitLab Bot 🤖