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 withdatetimeattribute - 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-labelandtitleattributes
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 datetimeattribute -
Updates titleandaria-labelfor accessibility -
Graceful fallback when JavaScript is disabled -
Consistent formatting across the application -
Copy pasting <time>selections retains the attributes
Edited by 🤖 GitLab Bot 🤖