@rbardini/time-duration

⏱️ A web component to format <time> elements with the elapsed time. GitHub

With datetime attribute

<time-duration>
  <time datetime="2020-01-01"></time>
</time-duration>

With <time> text content

<time-duration>
  <time>2020-01-01</time>
</time-duration>

With past date/time

<time-duration>
  <time datetime="2020-01-01">Jan 1, 2020 – Present</time>
</time-duration>

With future date/time

<time-duration>
  <time datetime="2030-01-01">Present – Jan 1, 2030</time>
</time-duration>

With reference date/time

<time-duration data-ref-datetime="2030-01-01">
  <time datetime="2020-01-01">Jan 1, 2020 – Jan 1, 2030</time>
</time-duration>

With duration string

<time-duration>
  <time datetime="P3Y6M4DT12H30M5S">Over 3 years</time>
</time-duration>

With language

<time-duration lang="ja">
  <time datetime="2020-01-01">2020年1月1日～現在</time>
</time-duration>

With duration and formatting options

<time-duration data-largest-unit="year" data-smallest-unit="month" data-style="long">
  <time datetime="2020-01-01">Years since Jan 1, 2020</time>
</time-duration>