Version: Next

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

Property	Description	Type	Default
`clear-input`	If true, the value of the component can be set to null	`boolean`	`false`
`disabled`	If true, the component will look disabled and not be interactable	`boolean`	`false`
`error`	If true the input element will be displayed as invalid	`boolean`	`false`
`error-text`	Error text displayed at the bottom of the field, if error is true	`string`	-
`format`	The format of the time. Only accepts valid time formats	`string`	`'HH:mm'`
`helper-text`	A brief text for the user, at the bottom of the field	`string`	-
`hour-step`	Set the interval between selectable hours	`number`	-
`label`	The label displayed for the field	`string`	-
`minute-step`	Set the interval between selectable minutes	`number`	-
`name`	The name of the control, which is submitted with the form data.	`string`	`-`
`placeholder`	Instructional text that shows before the input has a value	`string`	-
`required`	If true, the user must fill in a value before submitting a form	`boolean`	`false`
`second-step`	Set the interval between selectable seconds	`number`	-
`size`	Set the size of the component	`base` `body` `large` `medium` `small` `tiny` `xlarge` `xxlarge` `xxxlarge`	`'body'`
`value`	The value of the time-picker	`any`	-

Events

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the input loses focus.	-
atChange	`CustomEvent<InputValue>`	Emitted when the value has changed.	-
atFocus	`CustomEvent<void>`	Emitted when the input has focus.	-
atInput	`CustomEvent<KeyboardEvent>`	Emitted when a keyboard input occurred	-

TimePicker

Basic Usage​

Behavior​

Format​

Selecting Seconds​

Setting AM/PM​

Custom Intervals​

Playground​

API​

Properties​

Events​