Skip to main content
5.0.3Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.3

TimePicker

The Time Picker component is an input field for time-of-day. When clicked, the user gets a popup where they can select a time. This can be configured to allow seconds to be picked. The Time Picker can be included allongside the Date Picker, to let users pick date and time.

Basic Usage

<triton-time-picker></triton-time-picker>
<TritonTimePicker/>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-time-picker></triton-time-picker>
</body>
</html>

Behavior

Format

Use the format property to select the format of the time picker.

Selecting Seconds

To enable second selection, the Time Picker must be passed a format that includes seconds, using the format property. The helper-text is used to describe the time picker.

<triton-time-picker
format="HH:mm:ss"
helper-text="This time picker lets users select seconds"
></triton-time-picker>

Setting AM/PM

You can change the time selection mode of the Time Picker to AM/PM instead of the default 24h mode, by passing a format with a postfix.

<triton-time-picker 
format="hh:mm a"
label="Select time in AM/PM">
</triton-time-picker>

Custom Intervals

The time picker supports setting the interval of time between each of its step. For instance: should users be able to select every second of every minute, or is every 30 seconds enough? To use this feature, set the hour-step, minute-step or second-step properties to the desired interval.

<triton-time-picker
format="HH:mm:ss"
hour-step="2" minute-step="5" second-step="30"
helper-text="This time picker has custom intervals"
></triton-time-picker>

Playground

API

Properties

PropertyDescriptionTypeDefault
clear-inputIf true, the value of the component can be set to nullbooleanfalse
disabledIf true, the component will look disabled and not be interactablebooleanfalse
errorIf true the input element will be displayed as invalidbooleanfalse
error-textError text displayed at the bottom of the field, if error is truestring-
formatThe format of the time. Only accepts valid time formatsstring'HH:mm'
helper-textA brief text for the user, at the bottom of the fieldstring-
hour-stepSet the interval between selectable hoursnumber-
labelThe label displayed for the fieldstring-
minute-stepSet the interval between selectable minutesnumber-
placeholderInstructional text that shows before the input has a valuestring-
requiredIf true, the user must fill in a value before submitting a formbooleanfalse
second-stepSet the interval between selectable secondsnumber-
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlarge'body'
valueThe value of the time-pickerany-

Events

NameTypeDescriptionExtra
atBlurCustomEvent<void>Emitted when the input loses focus.-
atChangeCustomEvent<InputValue>Emitted when the value has changed.-
atFocusCustomEvent<void>Emitted when the input has focus.-
atInputCustomEvent<KeyboardEvent>Emitted when a keyboard input occurred-