Easily create nice looking time input.
The Input Time component is a web component built from scratch to allow users to easily select time in a 12-hour format, while outputting the selected time in a 24-hour format. To get started, simply use the <uk-input-time> markup in your HTML code.
There are several ways to capture values from the <uk-input-time> component. The simplest approach is to add a name attribute to the component. When you do this, a hidden input field with the specified name will be automatically generated, allowing you to easily capture the selected value on your server.
To prepopulate the Input Time component with an existing value, simply pass the value attribute with a 24-hour time format. To prepopulate with current time, just use the now attribute and it will automatically set the current time as the default value.
There are several size modifiers available. Just add one of the following classes to the cls attribute to make the input smaller or larger.
| Class | Description |
|---|---|
.uk-form-xsmall | Applies extra small size. |
.uk-form-small | Applies small size. |
.uk-form-medium | Applies medium size. |
.uk-form-large | Applies large size. |
To prevent user input, add the disabled attribute to the <uk-input-time> element. This will disable all input fields, making it impossible for users to enter or modify time.
To indicate an error state in the form, simply add the .uk-form-danger class to the cls attribute. This will apply a “danger” state to the component, providing visual feedback to the user.
When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.
The Input Time component supports internationalization through multiple methods with the following priority order (highest to lowest):
i18n attribute or script tag)<script id="uk-i18n">)Place this in your document <head> or before any input-time components:
| Key | Default | Description |
|---|---|---|
am | AM | Text for AM period (12-hour clock only) |
pm | PM | Text for PM period (12-hour clock only) |
hour-label | Hour | Aria-label for hour input field |
minute-label | Minute | Aria-label for minute input field |
meridiem-label | AM/PM | Aria-label for AM/PM toggle button |
time-label | Time | Aria-label for the time input group |
hour-placeholder | HH | Placeholder text for hour input |
minute-placeholder | MM | Placeholder text for minute input |
invalid-time | Invalid time format | Error message for invalid time format |
The Input Time component supports custom CSS classes through the cls attribute. This allows you to style specific elements within the time input without modifying the component’s internal structure.
Apply a class to the default element (container):
Target specific elements within the input time:
| Target | Description |
|---|---|
container | The main wrapper container for the entire component |
input | Base class applied to both hour and minute inputs |
hour-input | The hour input field (overrides input for hour field) |
minute-input | The minute input field (overrides input for minute field) |
separator | The colon separator between hour and minute |
meridiem-button | The AM/PM toggle button (12-hour clock only) |
button | Base button class (fallback for meridiem-button) |
The Input Time component supports custom inline styles through the stl attribute. This allows you to apply specific CSS styles to individual elements within the time input.
Apply styles to the default element (container):
Target specific elements with custom styles:
The stl attribute supports the same targets as the cls attribute. See the Available cls targets table above for a complete list of targetable elements.
The following attributes are available for this component:
| Name | Type | Default | Description |
|---|---|---|---|
autofocus | Boolean | false | Automatically focuses on the hour input field when the component is rendered. |
now | Boolean | false | Automatically sets the current time as the default value. |
clock | String | 12h | Clock format: 12h (with AM/PM) or 24h (without AM/PM). |
min | String | Minimum allowed time in HH:MM format. | |
max | String | Maximum allowed time in HH:MM format. | |
name | String | Name attribute for the hidden input field, enabling form submission. | |
disabled | Boolean | false | Disables all input fields, making the entire component read-only. |
required | Boolean | false | Marks the time input as required for form validation. |
value | String | Pre-populated time value in 24-hour format (HH:MM). | |
cls | String | Custom CSS classes. Can be a simple string or JSON object for targeting specific elements. | |
stl | String | Custom inline styles. Can be a simple string or JSON object for targeting specific elements. | |
i18n | String | Internationalization strings as JSON object or via configuration script. | |
force-prevent-rerender | Boolean | false | Prevents component rerendering (useful for HTMX or SPA scenarios). |
The Input Time component triggers the following event:
| Name | Description |
|---|---|
uk-input-time:input | Fired when the time value changes. Event detail contains {value: string} in 24-hour format. |