Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Date input

Guidance Code Accessibility

Component demo

Interactive example

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

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"
this.DEFAULT_DATE_FORMAT
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 whendisableDays 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

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

type: boolean - boolean | undefined
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
"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 - boolean | undefined
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
"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
false
Property emitDatePartChange
Attribute emit-date-part-change

Iftrue , every individual input field completed will emit an icChange event.

type: boolean - boolean | undefined
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 | null - null | string
Property hideHelperText
Attribute hide-helper-text

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

type: boolean
false
Property hideLabel
Attribute hide-label

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

type: boolean - boolean | undefined
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 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
""
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
""
Property name
Attribute name

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

type: string
this.inputId
Property required
Attribute required

Iftrue , the input will require a value.

type: boolean
false
Property showClearButton
Attribute show-clear-button

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

type: boolean - boolean | undefined
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" | undefined
"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 - string | undefined
""
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 | null | string | undefined
""
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: this.DEFAULT_DATE_FORMAT
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 - boolean | undefined
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 - boolean | undefined
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 emitDatePartChange
Attribute emit-date-part-change

Iftrue , every individual input field completed will emit an icChange event.

type: boolean - boolean | undefined
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 | null - null | 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 - boolean | undefined
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 - boolean | undefined
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" | undefined
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 - string | undefined
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 | null | string | undefined
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 | null; }
Web component icChange
React onIcChange
Emitted when the value has changed.
{ value: Date | null; dateObject: { day: string | null; month: string | null; year: string | null; }; utcValue: Date | null; }
Web component icFocus
React onIcFocus
Emitted when the input gains focus.
{ value: Date | null; }
Web component icBlur
React onIcBlur
Emitted when the input loses focus.
{ value: Date | null; }
Web component icChange
React onIcChange
Emitted when the value has changed.
{ value: Date | null; dateObject: { day: string | null; month: string | null; year: string | null; }; utcValue: Date | null; }
Web component icFocus
React onIcFocus
Emitted when the input gains focus.
{ value: Date | null; }

Methods

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

Variants

With values

String

Interactive example

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

Interactive example

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

Interactive example

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

Interactive example

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

Interactive example

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

Required

Interactive example

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

Disabled

Interactive example

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

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>

Custom helper text

Interactive example

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

Custom validation

Interactive example

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

Disabled past dates

Interactive example

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

Disabled future dates

Interactive example

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

Min and max

Interactive example

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

Form

Interactive example

Submit Reset
<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>

Last reviewed 31 May 2024 .
Navigated to Date input - Intelligence Community Design System