{"id":15937632,"url":"https://github.com/rbardini/time-duration","last_synced_at":"2026-01-19T15:02:45.567Z","repository":{"id":257811889,"uuid":"868281528","full_name":"rbardini/time-duration","owner":"rbardini","description":"⏱️ A web component to format \u003ctime\u003e elements with the elapsed time.","archived":false,"fork":false,"pushed_at":"2024-10-06T01:18:50.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T19:09:25.798Z","etag":null,"topics":["duration","elapsed","temporal","time","web-component"],"latest_commit_sha":null,"homepage":"https://time-duration.rbrd.in","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbardini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-06T00:36:31.000Z","updated_at":"2025-01-30T17:20:09.000Z","dependencies_parsed_at":"2024-10-06T01:19:32.123Z","dependency_job_id":"b1566d17-3845-4937-80ac-36b3841cc3ae","html_url":"https://github.com/rbardini/time-duration","commit_stats":null,"previous_names":["rbardini/time-duration"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rbardini/time-duration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbardini%2Ftime-duration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbardini%2Ftime-duration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbardini%2Ftime-duration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbardini%2Ftime-duration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbardini","download_url":"https://codeload.github.com/rbardini/time-duration/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbardini%2Ftime-duration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28572580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T14:39:55.009Z","status":"ssl_error","status_checked_at":"2026-01-19T14:39:01.217Z","response_time":67,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["duration","elapsed","temporal","time","web-component"],"created_at":"2024-10-07T05:04:15.451Z","updated_at":"2026-01-19T15:02:45.550Z","avatar_url":"https://github.com/rbardini.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @rbardini/time-duration\n\n[![npm package version](https://img.shields.io/npm/v/@rbardini/time-duration)](https://www.npmjs.com/package/@rbardini/time-duration)\n[![Build status](https://img.shields.io/github/actions/workflow/status/rbardini/time-duration/main.yml)](https://github.com/rbardini/time-duration/actions)\n\n⏱️ A web component to format `\u003ctime\u003e` elements with the elapsed time.\n\n\u003e [!IMPORTANT]\n\u003e This component depends on APIs with limited availability across major browsers as of Oct 2024. See [polyfilling](#polyfilling) for more information.\n\n```html\n\u003ctime-duration\u003e\n  \u003ctime datetime=\"2020-01-01\"\u003e\n    \u003c!-- 👇 will be replaced with current duration, e.g. \"4 yrs, 6 mths\" --\u003e\n    Jan 1, 2020 – Present\n  \u003c/time\u003e\n\u003c/time-duration\u003e\n```\n\n[View demos →](https://time-duration.rbrd.in)\n\n## Installation\n\n### Via package manager\n\n```console\nnpm install @rbardini/time-duration\n```\n\n```js\nimport '@rbardini/time-duration/register'\n```\n\n### Via `\u003cscript\u003e` tag\n\n[Download the latest release](https://github.com/rbardini/time-duration/releases) into your project and:\n\n```html\n\u003c!-- host yourself --\u003e\n\u003cscript type=\"module\" src=\"register.js\"\u003e\u003c/script\u003e\n```\n\nor embed from a third-party CDN (update version as needed; not recommended for production use):\n\n```html\n\u003c!-- esm.sh CDN --\u003e\n\u003cscript type=\"module\" src=\"https://esm.sh/@rbardini/time-duration@0.0.0/register\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- UNPKG CDN --\u003e\n\u003cscript type=\"module\" src=\"https://www.unpkg.com/@rbardini/time-duration@0.0.0/register.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n`\u003ctime-duration\u003e` must wrap a `\u003ctime\u003e` element with either a [`datetime` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#datetime) or a [valid `datetime`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values) text content:\n\n```html\n\u003ctime-duration\u003e\n  \u003ctime datetime=\"2020-01-01\"\u003eJan 1, 2020 – Present\u003c/time\u003e\n\u003c/time-duration\u003e\n\n\u003c!-- text content is used if no `datetime` attribute is defined --\u003e\n\u003ctime-duration\u003e\n  \u003ctime\u003e2020-01-01\u003c/time\u003e\n\u003c/time-duration\u003e\n```\n\n\u003e [!NOTE]\n\u003e Durations are formatted once and not updated in real time.\n\nThe `datetime` attribute will also be set to a [duration string](https://en.wikipedia.org/wiki/ISO_8601#Durations) representing the elapsed time, if not one already.\n\n### Options\n\n| Attribute           | Description                                           | Example        | Default               |\n| ------------------- | ----------------------------------------------------- | -------------- | --------------------- |\n| `data-ref-datetime` | The reference date and time of the resulting duration | `\"2030-01-01\"` | Current date and time |\n\n\u003e [!NOTE]\n\u003e Durations are never assumed to be negative—if the reference date and time is earlier than the target date and time, the duration is calculated from the reference to the target, otherwise from the target to the reference.\n\nData attributes are also forwarded as options to datetime/duration method calls. For example, to set the duration's `largestUnit` and `smallestUnit`, as well as the formatting `style`, simply declare them as data attributes:\n\n```html\n\u003ctime-duration data-largest-unit=\"year\" data-smallest-unit=\"month\" data-style=\"long\"\u003e\n  \u003ctime datetime=\"2020-01-01\"\u003eYears since Jan 1, 2020\u003c/time\u003e\n\u003c/time-duration\u003e\n```\n\nSee [`datetime.until()`](https://tc39.es/proposal-temporal/docs/plaindatetime.html#until) and [`duration.toLocaleString()`](https://tc39.es/proposal-temporal/docs/duration.html#toLocaleString) for more options.\n\n## Polyfilling\n\n`\u003ctime-duration\u003e` relies on the [`Temporal`](https://tc39.es/proposal-temporal/docs/) and [`Intl.DurationFormat`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat) APIs to work, which are not widely available yet. You may want to wait until browser support improves before using this component.\n\nIf you want to use it today, however, you must _polyfill_ these APIs. You can include the [`temporal-polyfill`](https://github.com/fullcalendar/temporal-polyfill) and [`@formatjs/intl-durationformat`](https://formatjs.io/docs/polyfills/intl-durationformat/) polyfills in your project, for example.\n\nOptionally, `\u003ctime-duration\u003e` can load these polyfills from esm.sh for you via the `polyfill+register` entry point (not recommended for production use):\n\n```js\nimport '@rbardini/time-duration/polyfill+register'\n```\n\nor\n\n```html\n\u003cscript type=\"module\" src=\"polyfill+register.js\"\u003e\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbardini%2Ftime-duration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbardini%2Ftime-duration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbardini%2Ftime-duration/lists"}