--- schema_version: "1" id: 8de18ade1b3473755611e73f67b77f8cb6600527de754fef3f174b0a92c1c8b9 title: TimePicker Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_timepicker_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_timepicker_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: fad3bc6f4373ad48ef5cde5478741ebe3b599c85df3c4e55b05d6c390bca7ff6 description: For the managed package runtime, this page contains a TimePicker LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # TimePicker Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a TimePicker LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Spring '20 The _TimePicker Lightning Web Component_ is a graphical user interface widget that allows the user to select a time from a list of options. ## Available c-time-picker Attributes

Attribute	Value	Type	Description
theme	slds, nds (Default: slds)		Sets the theme for this component.
label		string	Adds the text label for the input field.
disabled	no value	string	To disable the input field so users cannot interact with it, set this attribute.
required	no value (See example code)	string	If the input field must be filled out before the form is submitted, set this attribute.
read-only	no value	string	To prevent users from editing the input field, set this attribute.
placeholder		string	Displays text when the input field is empty to prompt the user for a valid entry.
min		string	Sets the minimum acceptable value for the input field.
max		string	Sets the maximum acceptable value for the input field.
message-when-value-missing		string	Adds an error message to be displayed when the value is missing. Default: This field is required.
message-when-bad-input		string	Adds an error message to be displayed when a bad input is detected. Default : This field is not valid.
name		string	Specifies the name of an input element.
icon-url		string	Defines the URL to get the icon. Default points to the relevant slds icon URL.
field-level-help		string	Adds a help-text to the input element.
format	(Default: HH:mm)	string	Sets the format for the time. View format options here
locale-format		string	Sets the locale. See Day.js locales here. Refer to the custom label cmpDayJsLocaleFormats
interval		number	Sets the interval between the options in the time dropdown.
output-format	(Default: HH:mm)	string	Sets the format of the output when output-type is string. View format options here
output-type	string, date (Default: string)	string	Sets the time output type. If set to date, returns time as a date object.
hide-icon	true, false (Default: false)	boolean	Specifies if the time picker icon should be hidden.
display-value		string	Read-only property that displays the formatted property value.
required-label		string	Adds a title for the asterisk when required is true.

## Example c-time-picker Component ``` ``` ## Label Slot Usage A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label. Example --- ``` Additional markup is inserted here ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _TimePicker Lightning Web Component_ is a graphical user interface widget that allows the user to select a time from a list of options. ## Available c-time-picker Attributes

Attribute	Value	Type	Description
theme	slds, nds (Default: slds)		Sets the theme for this component.
label		string	Adds the text label for the input field.
disabled	no value	string	To disable input field so users cannot interact with it, set this attribute.
required	no value (See example code)	string	If input field must be filled out before the form is submitted, set this attribute.
read-only	no value	string	To prevent users from editing input field, set this attribute.
placeholder		string	Displays text when input field is empty to prompt the user for a valid entry.
min		string	Sets the minimum acceptable value for the input field.
max		string	Sets the maximum acceptable value for the input field.
message-when-value-missing		string	Adds an error message to be displayed when the value is missing. Default: This field is required.
message-when-bad-input		string	Adds an error message to be displayed when a bad input is detected. Default : This field is not valid.
name		string	Specifies the name of an input element.
icon-url		string	Defines the url to get the icon. Default points to the relevant slds icon url.
field-level-help		string	Adds a help-text to the input element.
format	(Default: HH:mm)	string	Sets the format for the time. View format options here
interval		number	Sets the interval between the options in the time dropdown.
output-format	(Default: HH:mm)	string	Sets the format of the output when output-type is string. View format options here
output-type	string, date (Default: string)	string	Sets the time output type. If set to date, returns time as date object.
hide-icon	true, false (Default: false)	boolean	Specifies if time picker icon should be hidden.
displayValue		string	Getter only property, which displays as the formatted property value.

## Example c-time-picker Component ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _TimePicker Lightning Web Component_ is a graphical user interface widget that allows the user to select a time from a list of options. ## Available c-time-picker Attributes

Attribute	Value	Type	Description
theme	slds, nds (Default: slds)		Sets the theme for this component.
label		string	Adds the text label for the input field.
disabled	no value	string	To disable input field so users cannot interact with it, set this attribute.
required	no value (See example code)	string	If input field must be filled out before the form is submitted, set this attribute.
read-only	no value	string	To prevent users from editing input field, set this attribute.
placeholder		string	Displays text when input field is empty to prompt the user for a valid entry.
min		string	Sets the minimum acceptable value for the input field.
max		string	Sets the maximum acceptable value for the input field.
message-when-value-missing		string	Adds an error message to be displayed when the value is missing. Default: This field is required.
message-when-bad-input		string	Adds an error message to be displayed when a bad input is detected. Default : This field is not valid.
name		string	Specifies the name of an input element.
icon-url		string	Defines the url to get the icon. Default points to the relevant slds icon url.
field-level-help		string	Adds a help-text to the input element.
format	(Default: HH:mm)	string	Sets the format for the time. View format options here
interval		number	Sets the interval between the options in the time dropdown.
output-format	(Default: HH:mm)	string	Sets the format of the output when output-type is string. View format optionshttps://date-fns.org/v2.0.0-alpha.31/docs/format[here]
output-type	string, date (Default: string)	string	Sets the time output type. If set to date, returns time as date object.

## Example c-time-picker Component ``` ```