Date picker

CANARY

Component demo

Interactive example

Web component

React

<ic-date-picker
label="When would you like to collect your coffee?"
></ic-date-picker>

<IcDatePickerlabel="When would you like to collect your coffee?"/>

Date picker details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label for the date input. Required type: string
Property dateFormat Attribute date-format	The format in which the date will be displayed. type: IcDateFormat - "DD/MM/YYYY" \| "MM/DD/YYYY" \| "YYYY/MM/DD"	"DD/MM/YYYY"
Property disableDays	The days of the week to disable. type: IcWeekDays[]	[]
Property disableDaysMessage Attribute disable-days-message	The text to display as the validation message when`disableDays` is`true` and a disabled date is entered. type: string	"The date you have selected is on a day of the week that is not allowed. Please select another date."
Property disableFuture Attribute disable-future	If`true` , dates in the future are not allowed. A validation message will appear if a date in the future is entered. type: boolean	false
Property disableFutureMessage Attribute disable-future-message	The text to display as the validation message when`disableFuture` is`true` and a date in the future is entered. type: string	"Dates in the future are not allowed. Please select a date in the past."
Property disablePast Attribute disable-past	If`true` , dates in the past are not allowed. A validation message will appear if a date in the past is entered. type: boolean	false
Property disablePastMessage Attribute disable-past-message	The text to display as the validation message when`disablePast` is`true` and a date in the past is entered. type: string	"Dates in the past are not allowed. Please select a date in the future."
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the`dateFormat` value. type: string
Property hideHelperText Attribute hide-helper-text	If`true` , the helper text will be visually hidden, but still read out by screenreaders. type: boolean	false
Property hideLabel Attribute hide-label	If`true` , the label will be visually hidden, but the required label will still be read out by screen readers. type: boolean	false
Property inputId Attribute input-id	The ID for the input field. The default will be an automatically generated value. type: string
Property invalidDateMessage Attribute invalid-date-message	The text to display as the validation message when an invalid date is entered. type: string	"Please enter a valid date."
Property max Attribute max	The latest date that will be allowed. The value can be in any format supported as`dateFormat` , in ISO 8601 date string format (`yyyy-mm-dd` ) or as a JavaScript`Date` object. The value of this prop is ignored if`disableFuture` is set to`true` . type: string \| Date - Date \| string	""
Property min Attribute min	The earliest date that will be allowed. The value can be in any format supported as`dateFormat` , in ISO 8601 date string format (`yyyy-mm-dd` ) or as a JavaScript`Date` object. The value of this prop is ignored if`disablePast` is set to`true` . type: string \| Date - Date \| string	""
Property name Attribute name	The name of the control, which is submitted with the form data. type: string
Property openAtDate Attribute open-at-date	The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as`dateFormat` , in ISO 8601 date string format (`yyyy-mm-dd` ) or as a JavaScript`Date` object. type: string \| Date - Date \| string	""
Property required Attribute required	If`true` , the input will require a value. type: boolean	false
Property showDaysOutsideMonth Attribute show-days-outside-month	If`true` , days outside the current month will be visible in the date picker. type: boolean	true
Property showPickerClearButton Attribute show-picker-clear-button	If`true` , the`Clear` button on the date picker will be visible. type: boolean	true
Property showPickerTodayButton Attribute show-picker-today-button