Date picker
Date picker
Component demo
Interactive example
<ic-date-pickerlabel="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
.
|
|
|
---|---|---|
|
The label for the date input. |
|
|
The format in which the date will be displayed. |
|
|
The days of the week to disable. |
|
|
The text to display as the validation message when |
|
|
If |
|
|
The text to display as the validation message when |
|
|
If |
|
|
The text to display as the validation message when |
|
|
If |
|
|
The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the |
|
|
If |
|
|
The ID for the input field. The default will be an automatically generated value. |
|
|
The latest date that will be allowed. The value can be in any format supported as |
|
|
The earliest date that will be allowed. The value can be in any format supported as |
|
|
The name of the control, which is submitted with the form data. |
|
|
The date visible when the calendar opens. Used if no date is currently selected.
The value can be in any format supported as |
|
|
If |
|
|
If |
|
|
If |
|
|
If |
|
|
The size of the date picker to be displayed. |
|
|
The first day of the week. |
|
|
The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation. |
|
|
The text to display as the validation message. This will override the built-in date validation. |
|
|
The value of the date picker. The value can be in any format supported as |
|
The label for the date input. |
The format in which the date will be displayed. |
The days of the week to disable. |
The text to display as the validation message when |
If |
The text to display as the validation message when |
If |
The text to display as the validation message when |
If |
The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the |
If |
The ID for the input field. The default will be an automatically generated value. |
The latest date that will be allowed. The value can be in any format supported as |
The earliest date that will be allowed. The value can be in any format supported as |
The name of the control, which is submitted with the form data. |
The date visible when the calendar opens. Used if no date is currently selected.
The value can be in any format supported as |
If |
If |
If |
If |
The size of the date picker to be displayed. |
The first day of the week. |
The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation. |
The text to display as the validation message. This will override the built-in date validation. |
The value of the date picker. The value can be in any format supported as |
CSS Custom Properties
|
|
---|---|
|
|
|
|
|
|
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
---|---|---|
|
|
|
|
Variants
Sizes
Set the size of the date picker by using thesize
prop. This prop takes the valuessmall
,default
orlarge
. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"size="small"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"size="default"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"size="large"></ic-date-picker>
IcDatePicker label="When would you like to collect your coffee?" size="small"/><IcDatePickerlabel="When would you like to collect your coffee?"/><IcDatePickerlabel="When would you like to collect your coffee?"size="large"/>
Max width
Set the size of the input field by using the--input-width
CSS custom property. The picker will grow, but not exceed its maximum supported width.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"size="small"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"size="default"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"size="large"></ic-date-picker>
<IcDatePickerclassName={classes.datePicker}label="When would you like to collect your coffee?"size="small"/><IcDatePickerclassName={classes.datePicker}label="When would you like to collect your coffee?"/><IcDatePickerclassName={classes.datePicker}label="When would you like to collect your coffee?"size="large"/>
Disabled
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"disabled="true"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"disabled/>
Date formats
ThedateFormat
prop determines how dates are displayed. The supported formats areDD/MM/YYYY
,MM/DD/YYYY
orYYYY/MM/DD
.
The default format isDD/MM/YYYY
.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"date-format="MM/DD/YYYY"></ic-date-picker><ic-date-pickerlabel="When would you like to collect your coffee?"date-format="YYYY/MM/DD"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"/><IcDatePickerlabel="When would you like to collect your coffee?"dateFormat="MM/DD/YYYY"/><IcDatePickerlabel="When would you like to collect your coffee?"dateFormat="YYYY/MM/DD"/>
Value
Thevalue
prop sets the date in the input field. The value can be in any format supported by thedateFormat
prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"value="01/01/2024"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"value="01/01/2024"/>
Open at date
If novalue
is set, theopenAtDate
prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.
The supported formats are the same as for thevalue
prop.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"helper-text="The calendar will open showing 25th December 2024, if no date selected"open-at-date="2024-12-25"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"helperText="The calendar will open showing 25th December 2024, if no date selected"openAtDate="2024-12-25"/>
Start of week
The first day of the week can be changed by setting thestartOfWeek
prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"start-of-week="0"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"startOfWeek={0}/>
Disable days of week
Specific days of the week can be disabled from selection by setting thedisableDays
prop. The value can be set as an array of numeric values where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.
Interactive example
<ic-date-pickerid="weekday-picker"label="When would you like to collect your coffee?"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"disableDays={disabledDaysOfWeek}/>
Max and min
Themax
andmin
props can be used to limit the range of dates available for selection. Values can be in any format supported by thedateFormat
prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"helper-text="Choose a date between the 1st and 31st of July"min="2024-07-01"max="2024-07-31"show-picker-today-button="false"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"helperText="Choose a date between the 1st and 31st of July"min="2024-07-01"max="2024-07-31"showPickerTodayButton={false}/>
Disable dates in past
Dates before today can be disabled with thedisablePast
prop.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"disable-past="true"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"disablePast/>
Disable dates in future
Dates after today can be disabled with thedisableFuture
prop.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"disable-future="true"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"disableFuture/>
Days outside month hidden
Days outside of the current month in view can be hidden by setting theshowDaysOutsideMonth
prop tofalse
.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"show-days-outside-month="false"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"showDaysOutsideMonth={false}/>
Today and clear buttons hidden
The 'Go to today' and 'Clear' buttons can be hidden from the calendar view by setting theshowPickerTodayButton
andshowPickerClearButton
props tofalse
.
Interactive example
<ic-date-pickerlabel="When would you like to collect your coffee?"show-picker-today-button="false"show-picker-clear-button="false"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"showPickerTodayButton={false}showPickerClearButton={false}/>
Javascript dates
Any prop that accepts a date value can be set to a Javascript Date object. The following example sets thevalue
,max
andmin
props.
Interactive example
<ic-date-pickerid="js-date-picker"label="When would you like to collect your coffee?"helper-text="Choose a date between the 1st and 31st of July"show-picker-today-button="false"></ic-date-picker>
<IcDatePickerlabel="When would you like to collect your coffee?"min={newDate(2024,6,1)}max={newDate(2024,6,31)}value={newDate(2024,6,15)}helperText="Choose a date between the 1st and 31st of July"showPickerTodayButton={false}/>
IcChange Event
TheIcChange
event is emitted by the date picker when the selected date changes.
Interactive example
<ic-date-pickerid="ic-change-date-picker"label="When would you like to collect your coffee?"></ic-date-picker><spanid="selected-date"> Selected date:</span>
<IcDatePickerlabel="When would you like to collect your coffee?"onIcChange={dateChangedHandler}value={value}/><span>{selectedDate}</span>