--- schema_version: "1" id: a195aed86c0edfdaea5e3579166c6bb24388cc64a0b9d1ff4d61ea26b51fabf6 title: DatePicker 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_datepicker_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datepicker_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: b27f505390e550e56d9a821ca7bbf05e7dd7aeab7661dbf00ae697c493d1a3f5 description: For the managed package runtime, this page contains a DatePicker LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # DatePicker Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a DatePicker 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 _DatePicker Lightning Web Component_ is a date input element with a graphical user interface (GUI) widget that enables the user to select a date from a calendar. The _DatePicker LWC_ supports custom labels. ## Available c-date-picker Attributes

Attribute

Value

Type

Required

Description

label

  

string

  

Adds a visible name for the rendered date picker.

placeholder

  

string

  

Adds placeholder text in the input field.

error

  

string

  

Adds text for an error message.

name

  

string

  

Adds a name for the date picker.

mask

      

To define how a user must write an input value, set this attribute. (For example, "$###,###.000" , "##’##")

format

  

string

  

Sets the input format for the selected date. View format options here.

locale-format

  

string

  

Sets the locale. See Dayjs locales here. Refer to the custom label cmpDayJsLocaleFormats

output-format

(Default: YYYY-MM-DD)

string

  

Sets the format of the output, when output-type is string. View format options here.

min

  

string

  

Sets a minimum date. User defined value.

max

  

string

  

Sets a maximum date. User defined value

position

left, right (Default: left)

string

  

Specifies where the component displays in relation to the input field.

required

true, false (Default: false)

boolean

  

To make this component required, set to true. Adds an asterisk next to the label.

disabled

true, false (Default: false)

boolean

  

To disable this component, set to true.

readonly

true, false (Default: false)

boolean

  

To make this component read only, set to true.

theme

slds, nds (Default: slds)

string

  

Specifies which theme to use.

output-type

string, date (Default: string)

string

  

Sets the type of output.

value

  

string

  

Specifies the value of the datePicker element.

display-value

  

string

  

Read-only property that displays the formatted property value.

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 prev 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-date-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 ``` ## Available Custom Labels

Label

ApiName

Description

Select Date

cmpSelectDate

Text visible on mouse over of the calendar icon.

This field value is missing.

cmpFieldValueMissing

Message to display when user leaves the date picker when the value is missing.

Unable to render ${1} due to invalid localeFormat [${2}]. Please provide a valid localeFormat in the form of

localeFormatInvalidError

Text visible when a user enters an invalid locale format.

Previous Month

prevMonthLabel

Text visible on mouse over of the calendar's previous month icon. Default icon is a left arrow.

Next Month

nextMonthLabel

Text visible on mouse over of the calender's next month icon. Default icon is right arrow.

required

requiredLabel

Text visible on mouse over of *next to the Date label.

Pick a year

cmpPickYr

Assistive text for the year dropdown on the calendar's header.

Today

todayLabel

Text for the link to select today's date.

Invalid Value.

cmpInvalidValue

Text visible on input of an invalid value.

Date is before the allowed range.

cmpRangeUnderflow

Text visible when a user selects a date below the allowed range.

Date is after the allowed range.

cmpRangeOverflow

Text visible when a user selects a date date after the allowed range.
## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _DatePicker Lightning Web Component_ is a date input element with a graphical user interface (GUI) widget that enables the user to select a date from a calendar. ## Available c-date-picker Attributes

Attribute

Value

Type

Required

Description

  

label

  

string

  

Adds a visible name for the rendered date picker.

  

placeholder

  

string

  

Adds placeholder text in the input field.

  

error

  

string

  

Adds text for an error message.

  

name

  

string

  

Adds a name for the date picker.

  

mask

      

To define how a user must write an input value, set this attribute. (For example, "$###,###.000" , "##’##")

  

format

  

string

  

Sets the input format for the selected date. View format options here.

  

output-format

(Default: YYYY-MM-DD)

string

  

Sets the format of the output, when output-type is string. View format options here.

  

min

  

string

  

Sets a minimum date. User defined value.

  

max

  

string

  

Sets a maximum date. User defined value

  

position

left, right (Default: left)

string

  

Specifies where the component displays in relation to the input field.

  

required

true, false (Default: false)

boolean

  

To make this component required, set to true. Adds an asterisk next to the label.

  

disabled

true, false (Default: false)

boolean

  

To disable this component, set to true.

  

readonly

true, false (Default: false)

boolean

  

To make this component read only, set to true.

  

theme

slds, nds (Default: slds)

string

  

Specifies which theme to use.

  

output-type

string, date (Default: string)

string

  

Sets the type of output.

  

value

  

string

  

Specifies the value of the datePicker element.

  

displayValue

  

string

  

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

  

hide-icon

true,false (Default: false)

boolean

  

Specifies if date picker icon should be hidden

  
## Example c-date-picker Component ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _DatePicker Lightning Web Component_ is a date input element with a graphical user interface (GUI) widget that enables the user to select a date from a calendar. ## Available c-date-picker Attributes

Attribute

Value

Type

Required

Description

  

label

  

string

  

Adds a visible name for the rendered date picker.

  

placeholder

  

string

  

Adds placeholder text in the input field.

  

error

  

string

  

Adds text for an error message.

  

name

  

string

  

Adds a name for the date picker.

  

mask

      

To define how a user must write an input value, set this attribute. (For example, `$,.000'' , ` ’'')

  

format

  

string

  

Sets the input format for the selected date. View format options here.

  

output-format

(Default: YYYY-MM-DD)

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].

  

min

  

string

  

Sets a minimum date. User defined value.

  

max

  

string

  

Sets a maximum date. User defined value

  

position

left, right (Default: left)

string

  

Specifies where the component displays in relation to the input field.

  

required

true, false (Default: false)

boolean

  

To make this component required, set to true. Adds an asterisk next to the label.

  

disabled

true, false (Default: false)

boolean

  

To disable this component, set to true.

  

readonly

true, false (Default: false)

boolean

  

To make this component read only, set to true.

  

theme

slds, nds (Default: slds)

string

  

Specifies which theme to use.

  

output-type

string, date (Default: string)

string

  

Sets the type of output.

  

value

  

string

  

Specifies the value of the datePicker element.

  
## Example c-date-picker Component ``` ```