Basic Usage

Wraps the browser's native <input type="time"> so the user can click or tab between the hour, minute, and AM/PM segments and type numbers to change each one. The value is always a 24-hour HH:MM string regardless of the locale-dependent display format.

<k-time></k-time>

Default Value

Set an initial value with the value attribute using 24-hour HH:MM format.

<k-time value="14:30"></k-time>

Minute Increment

The increment attribute controls the minute step when the user presses the up/down arrow keys on the minute segment. Defaults to 1.

<k-time value="09:15" increment="15"></k-time>

Half-Hour Increment

<k-time value="13:00" increment="30"></k-time>

24-Hour Time

Add the military attribute to render in 24-hour form without an AM/PM segment. Internally the input is tagged as lang="en-GB" to request a 24-hour display; most modern browsers respect this. The stored value format is unchanged.

<k-time military value="17:45" increment="15"></k-time>

JavaScript Usage

Listen for the change event to react to committed values. The detail.value is a HH:MM string in 24-hour format.

<k-time id="jsTime" value="08:00" increment="5"></k-time>
<p>Selected: <span id="jsTimeOutput">08:00</span></p>
<script>
  const $time = document.getElementById('jsTime');
  const $out = document.getElementById('jsTimeOutput');
  $time.addEventListener('change', (e) => {
    $out.textContent = e.detail.value;
  });
</script>

Form Usage

The component is form-associated. Set a name so it participates in form submission. The submitted value is always the 24-hour HH:MM string, regardless of display mode.

<form id="timeForm">
  <label>Start: <k-time name="start" value="09:00" increment="15"></k-time></label>
  <label>End: <k-time name="end" value="17:00" increment="15" military></k-time></label>
  <button type="submit">Submit</button>
</form>
<p>Form Data: <span id="timeFormOutput"></span></p>
<script>
  document.getElementById('timeForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
    document.getElementById('timeFormOutput').textContent = entries.join(', ');
  });
</script>

Disabled

The disabled attribute prevents user interaction.

<k-time disabled value="12:00"></k-time>

JavaScript Reference

Constructor

Extends ShadowComponent

new Time()

Requirements

• ShadowComponent

Properties

value: String

The committed time as a 24-hour HH:MM string (e.g. "14:30"). Empty string when no time is set. Syncs to value attribute.

name: String

The form field name. When set inside a <form>, the component participates in form submission. Syncs to name attribute.

increment: Number

The minute step used when the user presses the up/down arrow keys on the minute segment. Also sets the underlying step attribute on the native input in seconds (increment × 60). Default is 1. Syncs to increment attribute.

military: Boolean

When true, the displayed time uses 24-hour format and no AM/PM segment. The stored value format is unchanged. Default is false. Syncs to military attribute.

disabled: Boolean

When true, the component cannot be changed by user interaction. The element appears at 50% opacity. Syncs to disabled attribute.

required: Boolean

When true and no time is set, the element reports a valueMissing validity error for form validation. Syncs to required attribute.

Events

change

Fired when the committed value changes. The event detail contains { value: String } in 24-hour HH:MM format, or an empty string when cleared.