# Timepicker - Entry point: `@koobiq/components/timepicker` - NgModule: `KbqTimepickerModule` - API: https://koobiq.io/api/timepicker.md - Page: https://koobiq.io/en/components/timepicker/overview A time field (timepicker) is a special input field that allows entering only time. ## When to use Use when you need to specify time. [**Example: Timepicker validation symbols** (`timepicker-overview`)](https://koobiq.io/examples/timepicker-overview.md) ## Component structure Consists of an input field, mask, and icon (optional). ### Variations The input mask comes in two variations, with different time formats: [**Example: Timepicker variations** (`timepicker-variations`)](https://koobiq.io/examples/timepicker-variations.md) ## How it works Time can be entered in two ways: using number keys and using arrow keys on the keyboard. Time input is only allowed in 24-hour format. When entering values, depending on where the focus is (hours, minutes, or seconds), the field validates acceptable values at that position: hours 0–23, minutes and seconds 0–59. After entering two digits (hours or minutes), a colon is inserted, and the cursor jumps to the next part of the mask (to minutes or seconds). After entering two digits for seconds, the cursor does not change position, and no colon is inserted. ### Input using arrows The ↑ ↓ keys increase or decrease the selected time unit by 1. Increase (decrease) affects only the selected unit (for example, in hours, 23 is followed by 0, and vice versa). For more details on input, see the section [Focus and keyboard interaction](#focus-and-keyboard-interaction). ### Default state In most cases, the field is empty, showing only the input mask. In other cases, when specifying time is not important for the user but important for the system, it will be useful to pre-fill the field with the current time (current time is understood as the time when the page was opened; it does not change dynamically). ## Validation ### Validation during input #### Entering letters and symbols [Validation during input](https://koobiq.io/en/other/validation.md#while-typing) is triggered: - when entering letters in any part of the mask; - when entering the first character, except digits. [**Example: Timepicker validation symbols** (`timepicker-overview`)](https://koobiq.io/examples/timepicker-overview.md) #### Entering symbols and digits If after entering two digits (in hours or minutes) any character other than digits and letters is entered, the field ignores this input. If after entering one digit (in hours or minutes) any character other than digits and letters is entered, the field treats this character as a separator and converts it to a colon, and a zero is inserted before the entered digit. If you enter values greater than 23 for hours and greater than 59 for minutes and seconds, they are converted to 23 for hours and 59 for minutes and seconds. [**Example: Timepicker validation symbols** (`timepicker-overview`)](https://koobiq.io/examples/timepicker-overview.md) ### Validation of copied values When copying values from the clipboard or pasting them using drag-and-drop, validation during input is triggered. If the copied value contained characters other than digits and letters, the rules from the "Entering symbols and digits" section above are applied to them. [**Example: Timepicker validation symbols** (`timepicker-overview`)](https://koobiq.io/examples/timepicker-overview.md) ### Validation using ReactiveFormsModule [**Example: Timepicker field validation** (`timepicker-field-validation`)](https://koobiq.io/examples/timepicker-field-validation.md) ## Focus and keyboard interaction | Key | Action | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Tab \ Shift + Tab | Move focus to (from) the time field | | ↓ ↑ | Cursor is set on any time unit (hours, minutes, or seconds) → decrease or increase the value by 1 | | → | Move the cursor to the next character. If the cursor is set after the last time unit (minutes or seconds, depending on variation), place the cursor before the first hour digit | | ← | Move the cursor to the previous character. If the cursor is set before the first hour digit, move the cursor after the last time unit (minutes or seconds, depending on variation) | | PgUp \ Home | Place the cursor before the first hour digit | | PgDn \ End | Move the cursor after the last time unit (minutes or seconds, depending on variation) | | Space | — If in any part of the mask → nothing happens | | | — If after entering two digits (hours or minutes) → move to the next part of the mask (minutes or seconds); | | | — If after entering one digit (in hours or minutes) → the field treats this key as a separator, a colon is inserted, and a zero is inserted before the entered digit | ## Design and animation The time field has a fixed width: it does not change even if the entered value is shorter than the mask. ## Additional ### Using Datepicker and Timepicker together This is an example of using Datepicker and Timepicker together to select a specific date and time. This approach is useful when you need to set an exact time for an event or deadline. The user can select a date through Datepicker and then specify the exact time through Timepicker. An implementation example is available in the [Datepicker](https://koobiq.io/en/components/datepicker.md#using-datepicker-and-timepicker-together) section