# Timepicker (fw-timepicker)
fw-timepicker displays a list or drop-down box with prepopulated time values and enables picking a time. The time values displayed in the list box are based on the fw-timepicker attribute values.
# Demo
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
allowDeselect | allow-deselect | Whether clicking on the already selected option disables it. | boolean | true |
caret | caret | Whether the arrow/caret should be shown in the timepicker. | boolean | true |
disabled | disabled | Set true to disable the element | boolean | false |
errorText | error-text | Error text displayed below the text box. | string | '' |
format | format | Format in which time values are populated in the list box. If the value is hh:mm a, the time values are in the 12-hour format. If the value is hh:mm, the time values are in the 24-hr format. The default value will be set based on the locale time format. | string | undefined |
hintText | hint-text | Hint text displayed below the text box. | string | '' |
interval | interval | Time interval between the values displayed in the list, specified in minutes. | number | 30 |
label | label | Label displayed on the interface, for the component. | string | '' |
locale | locale | Locale for which timePicker needs to be shown. Defaults to browser's current locale. | string | undefined |
maxTime | max-time | Upper time-limit for the values displayed in the list. The default value will be set based on the locale time format. | string | undefined |
minTime | min-time | Lower time-limit for the values displayed in the list. The default value will be set based on the locale time format. | string | undefined |
name | name | Name of the component, saved as part of form data. | string | '' |
optionsPlacement | options-placement | Placement of the options list with respect to timepicker. | "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" | 'bottom' |
placeholder | placeholder | Text displayed in the select before an option is selected. | string | undefined |
readonly | readonly | If true, the user cannot type in the text input | boolean | false |
required | required | Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute's value is undefined, the value is set to false. | boolean | false |
sameWidth | same-width | Whether the dropdown should be same width as that of the input. | boolean | true |
state | state | Theme based on which the input of the timepicker is styled. | "error" \| "normal" \| "warning" | 'normal' |
value | value | The Time value. The value is always in the non meridian format i.e., HH:mm | string | undefined |
warningText | warning-text | Warning text displayed below the text box. | string | '' |
# Events
Event | Description | Type |
---|---|---|
fwBlur | Triggered when the list box loses focus. | CustomEvent<any> |
fwChange | Triggered when a value is selected or deselected from the list box options. | CustomEvent<any> |
fwFocus | Triggered when the list box comes into focus. | CustomEvent<any> |
# Methods
# setFocus() => Promise<void>
Sets focus on a specific fw-timepicker
.
# Returns
Type: Promise<void>
# Dependencies
# Used by
# Depends on
# Graph
graph TD;
fw-timepicker --> fw-select
fw-timepicker --> fw-select-option
fw-select --> fw-tag
fw-select --> fw-popover
fw-select --> fw-button
fw-select --> fw-spinner
fw-select --> fw-icon
fw-select --> fw-list-options
fw-tag --> fw-tooltip
fw-tag --> fw-avatar
fw-tag --> fw-icon
fw-tooltip --> fw-popover
fw-button --> fw-spinner
fw-button --> fw-icon
fw-list-options --> fw-select-option
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-checkbox --> fw-icon
fw-input --> fw-icon
fw-datepicker --> fw-timepicker
fw-form-control --> fw-timepicker
style fw-timepicker fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks