# github/relative-time-element

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/github-relative-time-element).**

4,005 stars · 188 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/github/relative-time-element
- Homepage: https://github.github.io/relative-time-element/examples/
- awesome-repositories: https://awesome-repositories.com/repository/github-relative-time-element.md

## Topics

`custom-elements` `keep` `localization` `timezone` `web-components`

## Description

This project provides a web component time element that extends the standard HTML time tag to display human-readable relative timestamps and countdowns. It functions as a relative time formatter and time duration calculator, converting timestamps into localized strings that update automatically in the browser.

The tool enables dynamic timestamp displays that transition from relative phrases to absolute dates based on configurable time thresholds. It includes capabilities for date tense restriction, forcing timestamps to display exclusively as past or future dates, and supports precise duration formatting across years, months, days, hours, minutes, and seconds.

The implementation leverages the native browser Internationalization API for date rendering and localization across specific IANA time zones. It manages state through DOM attributes and utilizes interval polling to ensure time displays remain current without requiring a page refresh.

## Tags

### User Interface & Experience

- [Dynamic Relative Time Updaters](https://awesome-repositories.com/f/user-interface-experience/dynamic-relative-time-updaters.md) — Provides a web component that automatically refreshes relative time labels like two hours ago. ([source](https://github.com/github/relative-time-element/blob/main/README.md))
- [Relative Time Formatting](https://awesome-repositories.com/f/user-interface-experience/relative-time-formatting.md) — Provides a web component that converts timestamps into localized relative strings that update automatically in the browser. ([source](https://github.com/github/relative-time-element/blob/main/package.json))
- [Semantic Time Elements](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/semantic-time-elements.md) — Extends the standard HTML time tag to create a specialized element for human-readable relative timestamps and countdowns.
- [Countdown Timers](https://awesome-repositories.com/f/user-interface-experience/countdown-timers.md) — Calculates and displays the remaining time until a future event in detailed calendar units.
- [Temporal Threshold Rendering](https://awesome-repositories.com/f/user-interface-experience/conditional-rendering/temporal-threshold-rendering.md) — Switches between relative phrasing and absolute date strings based on a configurable time difference limit.

### Development Tools & Productivity

- [Duration Calculations](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/duration-calculations.md) — Provides utilities to calculate the elapsed or remaining time between timestamps for countdowns. ([source](https://github.com/github/relative-time-element))
- [Human-Readable Duration Breakdown](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/duration-calculations/human-readable-duration-breakdown.md) — Breaks down elapsed or remaining time into exact years, months, days, hours, minutes, and seconds. ([source](https://github.com/github/relative-time-element/blob/main/README.md))
- [Format Transition Thresholds](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/component-based-date-time-specifications/relative-date-time-specifications/format-transition-thresholds.md) — Switches a date display from a relative phrase to a full absolute date once a specific time threshold is met.
- [Relative-to-Absolute Format Toggling](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/relative-date-formatting/relative-to-absolute-format-toggling.md) — Sets a time threshold that switches a timestamp from a relative phrase to a full absolute date. ([source](https://github.com/github/relative-time-element/blob/main/README.md))
- [Date Localizations](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities/human-readable-formatters/date-localizations.md) — Displays timestamps as localized date and time strings utilizing specific IANA time zones. ([source](https://github.com/github/relative-time-element/blob/main/README.md))

### Web Development

- [Internationalization API Integrations](https://awesome-repositories.com/f/web-development/internationalization-api-integrations.md) — Leverages the native browser Internationalization API for locale-aware date and relative time formatting.
- [Custom Element Wrappers](https://awesome-repositories.com/f/web-development/web-component-renderers/custom-element-wrappers.md) — Provides a custom element wrapper that adds reactive behavior to the standard HTML time tag.
- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Implements a reusable, modular custom HTML element based on the Web Components standard for time displays.
- [Attribute-Driven State Synchronization](https://awesome-repositories.com/f/web-development/attribute-driven-state-synchronization.md) — Implements state synchronization between DOM attributes and internal time calculations to enable reactive updates.
- [Date and Time Formatting](https://awesome-repositories.com/f/web-development/date-and-time-formatting.md) — Adjusts date and time formatting based on browser locale settings and IANA time zones. ([source](https://github.com/github/relative-time-element))
- [Asynchronous Polling Timers](https://awesome-repositories.com/f/web-development/real-time-web-architectures/asynchronous-polling-timers.md) — Uses asynchronous polling timers to periodically refresh relative time displays without page reloads.