kit

Time

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Time

A time at a place in another zone names that zone.

A place whose country keeps several zones is named by its zone, never a city.

An interval at a place names its zone once, after the interval.

A table at a place names its zone once, after its caption.

ClassesFrance Time
Class Time
Yoga class
Pilates
Supplier call

A range of times states only the parts that differ.

An interval with its day states the day once.

An interval carries the weekday where its role names it.

An interval with its day and weekday takes the reader's locale.

A moment in another locale reads whole in that locale's script.

A month states its month and year alone.

A long date and time and a date range wrap between their parts.

A duration states its hours and minutes, and a day or more stays in hours.

A duration in another locale takes that locale's own words.

Source
<p><time datetime="2025-04-12T14:00+01:00"><span>12 April 2025</span><wbr><span> at 14:00</span></time></p>
<p class="specimen-case-line">A time at a place in another zone names that zone.</p>
<p><time datetime="2025-04-12T19:30+02:00"><span>12 April 2025</span><wbr><span> at 19:30</span><wbr><span data-kit-region="zone">France Time</span></time></p>
<p class="specimen-case-line">A place whose country keeps several zones is named by its zone, never a city.</p>
<p><time datetime="2025-04-12T13:30-04:00"><span>12 April 2025</span><wbr><span> at 13:30</span><wbr><span data-kit-region="zone">Eastern Time</span></time></p>
<p class="specimen-case-line">An interval at a place names its zone once, after the interval.</p>
<p><time datetime="2025-04-12T09:00+02:00"><span>09:00–</span><wbr><span>11:30</span><wbr><span data-kit-region="zone">France Time</span></time></p>
<p class="specimen-case-line">A table at a place names its zone once, after its caption.</p>
<div data-kit-region="table" tabindex="0">
  <div><table data-kit-table="prose">
    <caption>Classes<span data-kit-region="zone">France Time</span></caption>
    <thead>
      <tr>
        <th scope="col">Class</th>
        <th scope="col">Time</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Yoga class</th>
        <td><div data-kit-region="fact"><time datetime="2025-04-14T09:00+02:00"><span>09:00–</span><wbr><span>10:00</span></time></div></td>
      </tr>
      <tr>
        <th scope="row">Pilates</th>
        <td><div data-kit-region="fact"><time datetime="2025-04-16T11:00+02:00"><span>11:00–</span><wbr><span>12:00</span></time></div></td>
      </tr>
      <tr>
        <th scope="row">Supplier call</th>
        <td><div data-kit-region="fact"><time datetime="2025-04-17T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span><wbr><span data-kit-region="zone">UK Time</span></time></div></td>
      </tr>
    </tbody>
  </table></div>
</div>
<p class="specimen-case-line">A range of times states only the parts that differ.</p>
<p><time datetime="2025-04-12T09:00+01:00"><span>09:00–</span><wbr><span>11:30</span></time></p>
<p class="specimen-case-line">An interval with its day states the day once.</p>
<p><time datetime="2025-04-12T09:00+01:00"><span>12 April 2025</span><wbr><span>, 09:00–</span><wbr><span>11:30</span></time></p>
<p class="specimen-case-line">An interval carries the weekday where its role names it.</p>
<p><time datetime="2025-04-12T09:00+01:00"><span>Saturday, 12 April 2025</span><wbr><span>, 09:00–</span><wbr><span>11:30</span></time></p>
<p class="specimen-case-line">An interval with its day and weekday takes the reader's locale.</p>
<p><time datetime="2025-04-12T09:00+05:30"><span>12 अप्रैल 2025</span><wbr><span>, सुबह 9:00–</span><wbr><span>11:30</span></time></p>
<p><time datetime="2025-04-12T09:00+05:30"><span>शनिवार, 12 अप्रैल 2025</span><wbr><span>, सुबह 9:00–</span><wbr><span>11:30</span></time></p>
<p class="specimen-case-line">A moment in another locale reads whole in that locale's script.</p>
<p><time datetime="2027-03-01T12:00+05:30"><span>1 मार्च 2027</span><wbr><span> को दोपहर 12:00 बजे</span></time></p>
<p class="specimen-case-line">A month states its month and year alone.</p>
<p><time datetime="2025-04-01">April 2025</time></p>
<p class="specimen-case-line">A long date and time and a date range wrap between their parts.</p>
<p><time datetime="2026-09-28T01:35+01:00"><span>28 September 2026</span><wbr><span> at 01:35</span></time></p>
<p><time datetime="2026-09-28/2027-10-28"><span>28 September 2026 – </span><wbr><span>28 October 2027</span></time></p>
<p class="specimen-case-line">A duration states its hours and minutes, and a day or more stays in hours.</p>
<p><time datetime="PT1H30M">1 hr 30 mins</time></p>
<p><time datetime="PT24H">24 hrs</time></p>
<p class="specimen-case-line">A duration in another locale takes that locale's own words.</p>
<p><time datetime="PT1H30M">1 घं॰ 30 मि॰</time></p>