<vega-time-picker label="Pick a time" size="small" time-format="12-hour" />
<vega-time-picker label="Pick a time" size="small" />
Time Picker components are used as variations on an input field when a time selection is necessary. When a user interacts with the input field on a form, the Time Picker is displayed as a dropdown.
Time picker fields behave similarly to input fields or drop-downs, and inherit most of their states (hover, focused, etc.).
The default format uses a 24-hour clock, however we also support a 12-hour format. When using a 12-hour format, the options will show with either an AM or PM suffix.
| Name | Description | Default |
|---|---|---|
| disabled | Identifies whether the time picker is disabled boolean |
false |
| label | This will set the default label text for the time picker. string |
"" |
| required | Indicates whether the vega-time-picker is required. boolean |
false |
| placeholder | The placeholder for the time input string | string[] |
|
| increments | Minutes interval option. It is limited between 1 and 59 number |
|
| time-format | Display 12 hours format HH:MM AM/PM, with default format HH:MMstring |
24-hour |
| value | This is a preset value for the time picker. “string* |
|
| size | The size of the time picker. Values include ‘default’ or ‘small’. |
default |
| validation-rules | Custom validation rules you can attach to the inputArray<{canEvaluate: (input: string, status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, shouldShowError: (status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, evaluate: (input: string) => EvaluateResult}> |
|
| position-relative-to | Selector for the element that will contain the popup. If not provided, the popup will be appended to the body. If you encounter a problem with position scrolling, modify this property. string |
- |
<vega-time-picker
id="vegaTimePicker"
increments={1}
label=""
placeholder=""
positionRelativeTo=""
size="default"
time-format="24-hour"
timeFormat="24-hour"
validationRules={[]}
value=""
/>
The vega-time-picker has 2 events, vegaChange and vegaValidate.
vegaChange - dispatched when the value of vega-time-picker is changed.document.querySelector("vega-time-picker").addEventListener("vegaChange", (e) => {
console.log(e.currentTarget.value) })vegaValidate - dispatched when the validation result of vega-time-picker is changed/document.querySelector("vega-time-picker").addEventListener("vegaValidate", (e) => {
console.log(e.currentTarget.isValid) })For more details, view in Storybook.