# 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 |
---|---|---|---|---|
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 p, the time values are in the 12-hour format. If the value is hh:mm, the time values are in the 24-hr format. | "HH:mm" \| "hh:mm a" | 'hh:mm a' |
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 | '' |
maxTime | max-time | Upper time-limit for the values displayed in the list. If this attribute's value is in the hh:mm format, it is assumed to be hh:mm AM. | string | this.isMeridianFormat ? '11:30 PM' : '23:30' |
minTime | min-time | Lower time-limit for the values displayed in the list. If this attribute's value is in the hh:mm format, it is assumed to be hh:mm AM. | string | this.isMeridianFormat ? '12:00 AM' : '00:00' |
name | name | Name of the component, saved as part of form data. | string | '' |
placeholder | placeholder | Text displayed in the select before an option is selected. | string | undefined |
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 |
state | state | Theme based on which the input of the timepicker is styled. | "error" \| "normal" \| "warning" | 'normal' |
value | value | Time output value | 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>
# CSS Custom Properties
Name | Description |
---|---|
--fw-error-color | Color of the error text. |
--fw-hint-color | Color of the hint text. |
--fw-warning-color | Color of the warning text. |
# 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-avatar
fw-tag --> fw-icon
fw-icon --> fw-toast-message
fw-toast-message --> fw-spinner
fw-toast-message --> fw-icon
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-form-control --> fw-timepicker
style fw-timepicker fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks