kit

Time field

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.

On Settings

Time field

Collections run until 21:00.
Opening hours
19 April 2025
half nine Type a time, such as 930 or 9.30pm.
Night shift
30 March 2025
France Time
Cannot be changed
Only the owner can change this.
Opening hours
19 April 2025
Only the owner can change this.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="time-collection">
  <label for="time-collection-control" id="time-collection-label">Collection time</label>
  <div data-kit-role="time-field" id="time-collection-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
    <input id="time-collection-control" type="text" autocomplete="off" value="19:30" aria-describedby="time-collection-control-resolved time-collection-help" aria-expanded="false" aria-controls="time-collection-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
    <span id="time-collection-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
    <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-collection-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
    <input type="hidden" name="collection_time" value="19:30">
    <div id="time-collection-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
  </div>
  <output for="time-collection-control"><time datetime="19:30">19:30</time></output>
  <span data-kit-region="help" id="time-collection-help">Collections run until 21:00.</span>
</div>
<div data-kit-role="form-group" id="time-hours">
  <fieldset>
    <legend id="time-hours-label">Opening hours</legend>
    <div data-kit-role="time-field" id="time-hours-control-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
      <input id="time-hours-control" type="text" autocomplete="off" value="22:00" aria-label="Start" aria-describedby="time-hours-control-resolved" aria-expanded="false" aria-controls="time-hours-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-hours-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-hours-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="hours[start]" value="22:00">
      <div id="time-hours-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
    <div data-kit-role="time-field" id="time-hours-control-end-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
      <input id="time-hours-control-end" type="text" autocomplete="off" value="01:30" aria-label="End" aria-describedby="time-hours-control-end-resolved time-hours-control-end-next-day" aria-expanded="false" aria-controls="time-hours-control-end-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-hours-control-end-next-day" data-kit-region="next-day">19 April 2025</span>
      <span id="time-hours-control-end-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-hours-control-end-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="hours[end]" value="01:30">
      <input type="hidden" name="hours[end_day]" value="next">
      <div id="time-hours-control-end-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
  </fieldset>
  <output for="time-hours-control"><time datetime="2025-04-18T22:00+01:00"><span>18 April 2025</span><wbr><span> at 22:00 – </span><wbr><span>19 April 2025</span><wbr><span> at 01:30</span></time></output>
</div>
<div data-kit-role="form-group" data-kit-state="error" id="time-refused">
  <label for="time-refused-control" id="time-refused-label">Collection time</label>
  <div data-kit-role="time-field" id="time-refused-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
    <input id="time-refused-control" type="text" autocomplete="off" value="half nine" aria-describedby="time-refused-control-resolved time-refused-error" aria-invalid="true" aria-expanded="false" aria-controls="time-refused-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
    <span id="time-refused-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
    <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-refused-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
    <input type="hidden" name="collection_time" value="half nine">
    <div id="time-refused-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
  </div>
  <output for="time-refused-control">half nine</output>
  <span data-kit-region="error" id="time-refused-error">Type a time, such as 930 or 9.30pm.</span>
</div>
<div data-kit-role="form-group" id="time-shift">
  <fieldset>
    <legend id="time-shift-label">Night shift</legend>
    <div data-kit-role="time-field" id="time-shift-control-time-field" data-kit-dates='{"day":"2025-03-29","locale":"en-GB","step":15,"zone":"Europe/Paris"}'>
      <input id="time-shift-control" type="text" autocomplete="off" value="22:00" aria-label="Start" aria-describedby="time-shift-control-resolved" aria-expanded="false" aria-controls="time-shift-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-shift-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-shift-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="shift[start]" value="22:00">
      <div id="time-shift-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
    <div data-kit-role="time-field" id="time-shift-control-end-time-field" data-kit-dates='{"day":"2025-03-29","locale":"en-GB","step":15,"zone":"Europe/Paris"}'>
      <input id="time-shift-control-end" type="text" autocomplete="off" value="06:00" aria-label="End" aria-describedby="time-shift-control-end-resolved time-shift-control-end-next-day" aria-expanded="false" aria-controls="time-shift-control-end-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-shift-control-end-next-day" data-kit-region="next-day">30 March 2025</span>
      <span id="time-shift-control-end-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-shift-control-end-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="shift[end]" value="06:00">
      <input type="hidden" name="shift[end_day]" value="next">
      <div id="time-shift-control-end-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
    <span data-kit-region="zone">France Time</span>
  </fieldset>
  <output for="time-shift-control"><time datetime="2025-03-29T22:00+01:00"><span>29 March 2025</span><wbr><span> at 22:00 – </span><wbr><span>30 March 2025</span><wbr><span> at 06:00</span><wbr><span data-kit-region="zone">France Time</span></time></output>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="time-collection-disabled">
<label for="time-collection-disabled-control" id="time-collection-disabled-label">Collection time</label>
<div data-kit-role="time-field" id="time-collection-disabled-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
  <input disabled id="time-collection-disabled-control" type="text" autocomplete="off" value="19:30" aria-describedby="time-collection-disabled-control-resolved time-collection-disabled-help" aria-expanded="false" aria-controls="time-collection-disabled-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
  <span id="time-collection-disabled-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
  <button disabled type="button" data-kit-role="icon-action" data-kit-region="times" id="time-collection-disabled-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
  <input disabled type="hidden" name="collection_time" value="19:30">
  <div id="time-collection-disabled-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
</div>
<output for="time-collection-disabled-control"><time datetime="19:30">19:30</time></output>
<span data-kit-region="help" id="time-collection-disabled-help">Only the owner can change this.</span>
</div>

<div data-kit-role="form-group" data-kit-holds="help" id="time-hours-disabled">
<fieldset>
  <legend id="time-hours-disabled-label">Opening hours</legend>
  <div data-kit-role="time-field" id="time-hours-disabled-control-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
    <input disabled id="time-hours-disabled-control" type="text" autocomplete="off" value="22:00" aria-label="Start" aria-describedby="time-hours-disabled-control-resolved time-hours-disabled-help" aria-expanded="false" aria-controls="time-hours-disabled-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
    <span id="time-hours-disabled-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
    <button disabled type="button" data-kit-role="icon-action" data-kit-region="times" id="time-hours-disabled-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
    <input disabled type="hidden" name="hours[start]" value="22:00">
    <div id="time-hours-disabled-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
  </div>
  <div data-kit-role="time-field" id="time-hours-disabled-control-end-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
    <input disabled id="time-hours-disabled-control-end" type="text" autocomplete="off" value="01:30" aria-label="End" aria-describedby="time-hours-disabled-control-end-resolved time-hours-disabled-control-end-next-day time-hours-disabled-help" aria-expanded="false" aria-controls="time-hours-disabled-control-end-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
    <span id="time-hours-disabled-control-end-next-day" data-kit-region="next-day">19 April 2025</span>
    <span id="time-hours-disabled-control-end-resolved" data-kit-region="resolved" aria-live="polite"></span>
    <button disabled type="button" data-kit-role="icon-action" data-kit-region="times" id="time-hours-disabled-control-end-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
    <input disabled type="hidden" name="hours[end]" value="01:30">
    <input disabled type="hidden" name="hours[end_day]" value="next">
    <div id="time-hours-disabled-control-end-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
  </div>
</fieldset>
<output for="time-hours-disabled-control"><time datetime="2025-04-18T22:00+01:00"><span>18 April 2025</span><wbr><span> at 22:00 – </span><wbr><span>19 April 2025</span><wbr><span> at 01:30</span></time></output>
<span data-kit-region="help" id="time-hours-disabled-help">Only the owner can change this.</span>
</div>

Time field, open

Show it open

Source
<div data-kit-role="form-group" id="time-open-meeting">
  <fieldset>
    <legend id="time-open-meeting-label">Meeting</legend>
    <div data-kit-role="time-field" id="time-open-meeting-control-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
      <input id="time-open-meeting-control" type="text" autocomplete="off" value="14:00" aria-label="Start" aria-describedby="time-open-meeting-control-resolved" aria-expanded="false" aria-controls="time-open-meeting-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-open-meeting-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-open-meeting-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="meeting[start]" value="14:00">
      <div id="time-open-meeting-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
    <div data-kit-role="time-field" id="time-open-meeting-control-end-time-field" data-kit-dates='{"day":"2025-04-18","locale":"en-GB","step":15,"zone":"Europe/London"}'>
      <input id="time-open-meeting-control-end" type="text" autocomplete="off" value="15:30" aria-label="End" aria-describedby="time-open-meeting-control-end-resolved time-open-meeting-control-end-next-day" aria-expanded="false" aria-controls="time-open-meeting-control-end-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
      <span id="time-open-meeting-control-end-next-day" data-kit-region="next-day"></span>
      <span id="time-open-meeting-control-end-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="time-open-meeting-control-end-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
      <input type="hidden" name="meeting[end]" value="15:30">
      <input type="hidden" name="meeting[end_day]" value="">
      <div id="time-open-meeting-control-end-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
  </fieldset>
  <output for="time-open-meeting-control"><time datetime="2025-04-18T14:00"><span>14:00 – </span><wbr><span>15:30</span></time></output>
</div>