Date input
Date input
Component demo
Interactive example
<ic-date-inputlabel="When would you like to collect your coffee?"></ic-date-input>
<IcDateInputlabel="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
.
|
|
|
---|---|---|
|
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. |
|
|
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. |
|
|
If |
|
|
If |
|
|
The size of the date input to be displayed. |
|
|
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 input. 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. |
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. |
If |
If |
The size of the date input to be displayed. |
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 input. The value can be in any format supported as |
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Methods
|
|
|
---|---|---|
|
|
|
|
Variants
With values
String
Interactive example
<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
<ic-date-inputlabel="When would you like to collect your coffee?"></ic-date-input>
<IcDateInputlabel="When would you like to collect your coffee?"value={newDate("28 November 2021")}/>
Zulu datetime
Interactive example
<ic-date-inputlabel="When would you like to collect your coffee?"></ic-date-input>
<IcDateInputlabel="When would you like to collect your coffee?"value={newDate("1 May 1990").toISOString()}/>
String with hyphens
Interactive example
<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
<ic-date-inputlabel="When would you like to collect your coffee?"></ic-date-input>
<IcDateInputlabel="When would you like to collect your coffee?"value={Date.now()}/>
Required
Interactive example
<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
<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
<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
<ic-date-inputlabel="When would you like to collect your coffee?"helper-text="We will have your order ready for you on this date"></ic-date-input>
<IcDateInputlabel="When would you like to collect your coffee?"helperText="We will have your order ready for you on this date"/>
Custom validation
Interactive example
<ic-date-inputlabel="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-inputlabel="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-inputlabel="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>
<IcDateInputlabel="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."/><IcDateInputlabel="When would you like to collect your coffee?"validationStatus="warning"validationText="Please be aware that there may be a coffee shortage on that day."/><IcDateInputlabel="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
<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
<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
<ic-date-inputlabel="When would you like to collect your coffee?"min="02/01/2023"max="20-07-2023"></ic-date-input>
<IcDateInputlabel="When would you like to collect your coffee?"min="02/01/2023"max="20-07-2023"/>
Form
Interactive example
<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>);