Date input

CANARY

Component demo

Interactive example

Web component

React

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

<IcDateInput
label="When would you like to collect your coffee?"
onChange={({ detail })=>console.log(detail.value)}
/>

Date input 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 set 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 will still be read out by screen readers. type: boolean	false
Property inputId Attribute input-id	The ID for the input. type: string	`ic-date-input-${inputIds++}`
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	this.inputId
Property required Attribute required	If`true` , the input will require a value. type: boolean	false
Property showClearButton Attribute show-clear-button	If`true` , a button which clears the date input when clicked will be displayed. type: boolean	true
Property size Attribute size	The size of the date input to be displayed. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property validationStatus Attribute validation-status	The validation status - e.g. 'error' \| 'warning' \| 'success'. This will override the built-in date validation. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning"	""
Property validationText Attribute validation-text	The text to display as the validation message. This will override the built-in date validation. type: string	""
Property value Attribute value	The value of the date input. 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 \| null \| undefined - Date \| string	""

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"

Default: "DD/MM/YYYY"

Property

disableDays

The days of the week to disable.

type: IcWeekDays[]

Default: []

Property

disableDaysMessage

Attribute

disable-days-message

The text to display as the validation message whendisableDays is set and a disabled date is entered.

type: string

Default: "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

Iftrue , dates in the future are not allowed. A validation message will appear if a date in the future is entered.

type: boolean

Default: false

Property

disableFutureMessage

Attribute

disable-future-message

The text to display as the validation message whendisableFuture is true and a date in the future is entered.

type: string

Default: "Dates in the future are not allowed. Please select a date in the past."

Property

disablePast

Attribute

disable-past

Iftrue , dates in the past are not allowed. A validation message will appear if a date in the past is entered.

type: boolean

Default: false

Property

disablePastMessage

Attribute

disable-past-message

The text to display as the validation message whendisablePast is true and a date in the past is entered.

type: string

Default: "Dates in the past are not allowed. Please select a date in the future."

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: 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 thedateFormat value.

type: string

Property

hideHelperText

Attribute

hide-helper-text

Iftrue , the helper text will be visually hidden, but still read out by screenreaders.

type: boolean

Default: false

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be visually hidden, but will still be read out by screen readers.

type: boolean

Default: false

Property

inputId

Attribute

input-id

The ID for the input.

type: string

Default: `ic-date-input-${inputIds++}`

Property

invalidDateMessage

Attribute

invalid-date-message

The text to display as the validation message when an invalid date is entered.

type: string

Default: "Please enter a valid date."

Property

max

Attribute

max

The latest date that will be allowed. The value can be in any format supported asdateFormat , in ISO 8601 date string format (yyyy-mm-dd ) or as a JavaScriptDate object. The value of this prop is ignored ifdisableFuture is set totrue .

type: string | Date - Date | string

Default: ""

Property

min

Attribute

min

The earliest date that will be allowed. The value can be in any format supported asdateFormat , in ISO 8601 date string format (yyyy-mm-dd ) or as a JavaScriptDate object. The value of this prop is ignored ifdisablePast is set totrue .

type: string | Date - Date | string

Default: ""

Property

name

Attribute

name

The name of the control, which is submitted with the form data.

type: string

Default: this.inputId

Property

required

Attribute

required

Iftrue , the input will require a value.

type: boolean

Default: false

Property

showClearButton

Attribute

show-clear-button

Iftrue , a button which clears the date input when clicked will be displayed.

type: boolean

Default: true

Property

size

Attribute

size

The size of the date input to be displayed.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Property

validationStatus

Attribute

validation-status

The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.

type: IcInformationStatusOrEmpty - "" | "error" | "success" | "warning"

Default: ""

Property

validationText

Attribute

validation-text

The text to display as the validation message. This will override the built-in date validation.

type: string

Default: ""

Property

value

Attribute

value

The value of the date input. The value can be in any format supported asdateFormat , in ISO 8601 date string format (yyyy-mm-dd ) or as a JavaScriptDate object.

type: string | Date | null | undefined - Date | string

Default: ""

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icBlur React onIcBlur	Emitted when the input loses focus.	{ value: Date; }
Web component icChange React onIcChange	Emitted when the value has changed.	{ value: Date; }
Web component icFocus React onIcFocus	Emitted when the input gains focus.	{ value: Date; }

Web component

icBlur

React

onIcBlur

Emitted when the input loses focus.

{ value: Date; }

Web component

icChange

React

onIcChange

Emitted when the value has changed.

{ value: Date; }

Web component

icFocus

React

onIcFocus

Emitted when the input gains focus.

{ value: Date; }

Methods

Name	Description	Signature
Method getDate	Returns the value as a Date object	getDate() => Promise<Date>

Method

getDate

Returns the value as a Date object

getDate() => Promise<Date>

Variants

With values

String

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"value="21/01/2001"></ic-date-input>

<IcDateInputlabel="When would you like to collect your coffee?"value="21/01/2001"/>

Date object

Interactive example

Web component

React

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

<IcDateInput
label="When would you like to collect your coffee?"
value={newDate("28 November 2021")}
/>

Zulu datetime

Interactive example

Web component

React

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

<IcDateInput
label="When would you like to collect your coffee?"
value={newDate("1 May 1990").toISOString()}
/>

String with hyphens

Interactive example

Web component

React

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

<IcDateInputlabel="When would you like to collect your coffee?"value="25-05-2005"/>

Epoch date

Interactive example

Web component

React

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

<IcDateInput
label="When would you like to collect your coffee?"
value={Date.now()}
/>

Required

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"required="true"></ic-date-input>

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

Disabled

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"disabled="true"></ic-date-input>

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

Sizes

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"size="small"></ic-date-input>
<ic-date-inputlabel="When would you like to collect your coffee?"></ic-date-input>
<ic-date-inputlabel="When would you like to collect your coffee?"size="large"></ic-date-input>

<IcDateInputlabel="When would you like to collect your coffee?"size="small"/>
<IcDateInputlabel="When would you like to collect your coffee?"/>
<IcDateInputlabel="When would you like to collect your coffee?"size="large"/>

Custom helper text

Interactive example

Web component

React

<ic-date-input
label="When would you like to collect your coffee?"
helper-text="We will have your order ready for you on this date"
></ic-date-input>

<IcDateInput
label="When would you like to collect your coffee?"
helperText="We will have your order ready for you on this date"
/>

Custom validation

Interactive example

Web component

React

<ic-date-input
label="When would you like to collect your coffee?"
validation-status="error"
validation-text="There is a coffee shortage forecast for that day. Please choose a different date."
></ic-date-input>
<ic-date-input
label="When would you like to collect your coffee?"
validation-status="warning"
validation-text="Please be aware that there may be a coffee shortage on that day."
></ic-date-input>
<ic-date-input
label="When would you like to collect your coffee?"
validation-status="success"
validation-text="Your coffee will be available for you to collect on this day."
></ic-date-input>

<IcDateInput
label="When would you like to collect your coffee?"
validationStatus="error"
validationText="There is a coffee shortage forecast for that day. Please choose a different date."
/>
<IcDateInput
label="When would you like to collect your coffee?"
validationStatus="warning"
validationText="Please be aware that there may be a coffee shortage on that day."
/>
<IcDateInput
label="When would you like to collect your coffee?"
validationStatus="success"
validationText="Your coffee will be available for you to collect on this day."
/>

Disabled past dates

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"disable-past="true"></ic-date-input>

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

Disabled future dates

Interactive example

Web component

React

<ic-date-inputlabel="When would you like to collect your coffee?"disable-future="true"></ic-date-input>

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

Min and max

Interactive example

Web component

React

<ic-date-input
label="When would you like to collect your coffee?"
min="02/01/2023"
max="20-07-2023"
></ic-date-input>

<IcDateInput
label="When would you like to collect your coffee?"
min="02/01/2023"
max="20-07-2023"
/>

Form

Interactive example

Web component

React

<form>
<ic-date-inputlabel="When would you like to collect your coffee?"value="13/03/1951"></ic-date-input>
<ic-buttontype="submit"value="Submit"></ic-button>
<ic-buttontype="reset"value="Reset"></ic-button>
</form>

constformSubmit=(ev)=>{
  ev.preventDefault();
console.log(ev);
};
return(
<formonSubmit={formSubmit}>
<IcDateInputlabel="When would you like to collect your coffee?"value="13/03/1951"/>
<IcButtontype="submit">Submit</IcButton>
<IcButtontype="reset">Reset</IcButton>
</form>
);

Last reviewed 31 May 2024 .