Long duration with days

Edit the days, hours, minutes, seconds, or milliseconds. The value display updates when an edited field is committed (for example, when you move to another field). Hours roll over at 24.

Duration

element.value

element.dayFriendlyValue

`.value` uses `D:HH:mm:ss.SSS` in days mode. `dayFriendlyValue` includes unit labels, such as `2d 03h 04m 05.006s`.

Element markup

<input-duration
  id="duration"
  show-days
  aria-labelledby="duration-label"
  value="2:03:04:05.006">
</input-duration>

Back to project demo