--- schema_version: "1" id: 45a2c33cb619b9725e249ed965da08a783af219fdfa6ee451504d1c828c18df7 title: DateTimePicker 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_datetimepicker_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datetimepicker_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 4d405196f14cd20bc323c405b9a5fcdea44c2b1e7f331c3e4557d428718ac153 description: For the managed package runtime, this page contains a DateTimePicker LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # DateTimePicker Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a DateTimePicker 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 _DateTimePicker Lightning Web Component_ is a set of input fields with graphical user interface (GUI) widgets that enable the user to select a date from a calendar and a time from a list. ## Available c-datetime-picker Attributes

Attribute

Value

Type

Required

Description

theme

slds, nds (Default: slds)

    

Specifies which theme to use.

label

  

string

  

Sets the visible name for the component.

disabled

no value (See example code.)

string

  

To prevent users from interacting with the field, set this attribute. Sets both date and time elements.

required

no value (See example code.)

    

To require input field, set this attribute. Sets both date and time elements.

read-only

no value (See example code.)

string

  

If field is read-only and cannot be edited by user, set this attrubute.

min

  

string

  

The minimum acceptable value for the date. Must be in output-format.

max

  

string

  

The maximum acceptable value for the date. Must be in output-format.

message-when-value-missing

(Default: This field is required)

string

  

Error message to display when the value is missing.

message-when-bad-input

(Default : This field is not valid)

string

  

Error message to display when a bad input is detected.

message-when-range-overflow

  

string

  

Displays an error message when min and max are set and a user sets a value that goes above the max value.

message-when-range-underflow

  

string

  

Displays an error message when min and max are set and a user sets a value that goes below the min value.

icon-url

(Default: slds icon url)

string

  

Defines the url for the icon. Set for both date and time elements.

field-level-help

  

string

  

Adds help text.

interval

  

string/number

  

Defines the time range in the dropdown options of the time input field. User can set value as "15" or 15.

output-format

(Default: DD/MM/YYYY hh:mm a)

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 output type. If date is set, returns date object.

date-name

  

string

  

Specifies the name of the date input element.

time-name

  

string

  

Specifies the name of the time input element.

date-label

  

string

  

Sets the visible name for the date field.

time-label

  

string

  

Sets the visible name for the time field.

date-placeholder

  

string

  

Adds placeholder text inside the date input field.

time-placeholder

  

string

  

Adds placeholder text inside the time input field.

value

  

string

  

Specifies the value of the datetimePicker element. When the date value is set, the default time value is 12:00pm. When the time value is set, the default date value is today.

display-value

  

string

  

Read-only property that displays as the formatted property value.

hide-icon

true, false (Default: false)

boolean

  

Specifies if date time picker icon should be hidden

locale-format-invalid-error

  

string

  

Specifies the error message displayed when locale format is invalid.

select-date-label

  

string

  

Adds a title describing the instructions for the date picker.

prev-month-label

  

string

  

Adds a title for the previous month icon.

next-month-label

  

string

  

Adds a title for the next month icon.

required-label

  

string

  

Adds a title for the asterisk when required is true.

pick-year-label

  

string

  

Adds a title for the year dropdown selector.

today-label

  

string

  

Adds a visible name for today.
## Example c-datetime-picker Component ``` ``` ## Example 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. ``` Additional markup is inserted here ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _DateTimePicker Lightning Web Component_ is a set of input fields with graphical user interface (GUI) widgets that enable the user to select a date from a calendar and a time from a list. ## Available c-datetime-picker Attributes

Attribute

Value

Type

Required

Description

theme

slds, nds (Default: slds)

    

Specifies which theme to use.

label

  

string

  

Sets the visible name for the component.

disabled

no value (See example code.)

string

  

To prevent users from interacting with the field, set this attribute. Sets both date and time elements.

required

no value (See example code.)

    

To require input field, set this attribute. Sets both date and time elements.

read-only

no value (See example code.)

string

  

If field is read-only and cannot be edited by user, set this attrubute.

min

  

string

  

The minimum acceptable value for the date. Must be in output-format.

max

  

string

  

The maximum acceptable value for the date. Must be in output-format.

message-when-value-missing

(Default: This field is required)

string

  

Error message to display when the value is missing.

message-when-bad-input

(Default : This field is not valid)

string

  

Error message to display when a bad input is detected.

message-when-range-overflow

  

string

  

Displays an error message when min and max are set and a user sets a value that goes above the max value.

message-when-range-underflow

  

string

  

Displays an error message when min and max are set and a user sets a value that goes below the min value.

icon-url

(Default: slds icon url)

string

  

Defines the url for the icon. Set for both date and time elements.

field-level-help

  

string

  

Adds help text.

interval

  

string/number

  

Defines the time range in the dropdown options of the time input field. User can set value as "15" or 15.

output-format

(Default: DD/MM/YYYY hh:mm a)

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 output type. If date is set, returns date object.

date-name

  

string

  

Specifies the name of the date input element.

time-name

  

string

  

Specifies the name of the time input element.

date-label

  

string

  

Sets the visible name for the date field.

time-label

  

string

  

Sets the visible name for the time field.

date-placeholder

  

string

  

Adds placeholder text inside the date input field.

time-placeholder

  

string

  

Adds placeholder text inside the time input field.

value

  

string

  

Specifies the value of the datetimePicker element. When the date value is set, the default time value is 12:00pm. When the time value is set, the default date value is today.

displayValue

  

string

  

Getter only property, which displays as the formatted property value.

hide-icon

true, false (Default: false)

boolean

  

Specifies if date time picker icon should be hidden
## Example c-datetime-picker Component ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _DateTimePicker Lightning Web Component_ is a set of input fields with graphical user interface (GUI) widgets that enable the user to select a date from a calendar and a time from a list. ## Available c-datetime-picker Attributes

Attribute

Value

Type

Required

Description

theme

slds, nds (Default: slds)

    

Specifies which theme to use.

label

  

string

  

Sets the visible name for the component.

disabled

no value (See example code.)

string

  

To prevent users from interacting with the field, set this attribute. Sets both date and time elements.

required

no value (See example code.)

    

To require input field, set this attribute. Sets both date and time elements.

read-only

no value (See example code.)

string

  

If field is read-only and cannot be edited by user, set this attrubute.

min

  

string

  

The minimum acceptable value for the date. Must be inoutput-format.

max

  

string

  

The maximum acceptable value for the date. Must be inoutput-format.

message-when-value-missing

(Default: This field is required)

string

  

Error message to display when the value is missing.

message-when-bad-input

(Default : This field is not valid)

string

  

Error message to display when a bad input is detected.

message-when-range-overflow

  

string

  

Displays an error message whenmin and max are set and a user sets a value that goes above the max value.

message-when-range-underflow

  

string

  

Displays an error message when min and max are set and a user sets a value that goes below the min value.

icon-url

(Default: slds icon url)

string

  

Defines the url for the icon. Set for both date and time elements.

field-level-help

  

string

  

Adds help text.

interval

  

string/number

  

Defines the time range in the dropdown options of the time input field. User can set value as ``15'' or 15.

output-format

(Default: DD/MM/YYYY hh:mm a)

string

  

Sets the format of the output when output-type is string. View format optionshttps://date-fns.org/v2.0.0-alpha.37/docs/format[here].

output-type

string, date (Default: string)

string

  

Sets the output type. If date is set, returns date object.

date-name

  

string

  

Specifies the name of the date input element.

time-name

  

string

  

Specifies the name of the time input element.

date-label

  

string

  

Sets the visible name for the date field.

time-label

  

string

  

Sets the visible name for the time field.

date-placeholder

  

string

  

Adds placeholder text inside the date input field.

time-placeholder

  

string

  

Adds placeholder text inside the time input field.

value

  

string

  

Specifies the value of the datetimePicker element.
## Example c-datetime-picker Component ``` ```