Date input - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<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"	this.DEFAULT_DATE_FORMAT
Property disableDays	The days of the week to disable. type: IcWeekDays[] - export enum IcWeekDays { Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6, }	[]
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 - boolean \| undefined	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 - boolean \| undefined	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 emitDatePartChange Attribute emit-date-part-change	If`true` , 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 the`dateFormat` value. type: string \| null - null \| 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 - 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 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 - 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 as`dateFormat` , in ISO 8601 date string format (`yyyy-mm-dd` ) or as a JavaScript`Date` 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[] - export enum IcWeekDays { Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6, }

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.

Default: ""

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot helper-text	Content is set as the helper text for the date input.

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

Web component

React

Show full code

<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

Show full code

<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

Show full code

<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

Show full code

<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

Show full code

<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

To set the date input as a required field, set therequired prop totrue . This will add an asterisk at the end of the date input label.

Interactive example

Web component

React

Show full code

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

Hide label

To hide the label, set thehideLabel prop totrue . The requiredlabel will still be read out by screen readers.

Interactive example

Web component

React

Show full code

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

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

Disabled

Set thedisabled prop totrue to prevent interaction with the date input.

Interactive example

Web component

React

Show full code

<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

Show full code

<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

Use the helper text to add additional detail for the date input. Display custom content using thehelper-text slot.

Interactive example

Web component

React

Show full code

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

Hide helper text

Interactive example

Web component

React

Show full code

<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"
hide-helper-text="true"
></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"
hideHelperText
/>

Custom validation

Validation on date input is set via thevalidationStatus andvalidationText props.

validationStatus will set the style of the validation message.validationStatus accepts:

error
warning
success

validationStatus is required for thevalidationText to appear.

Interactive example

Web component

React

Show full code

<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

Validation can be set on the date input if a date in the past has been set by setting thedisablePast prop totrue .

Enter a date in the past to view the validation message:

Interactive example

Web component

React

Show full code

<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

Validation can be set on the date input if a date in the future has been set by setting thedisableFuture prop totrue .

Enter a date in the future to view the validation message:

Interactive example

Web component

React

Show full code

<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

It is possible to set a minimum and maximum date range using themin andmax props. If a date is set and it is before the minimum or after the maximum date, a validation error will appear.

Themin andmax props accept the same date formats as thevalue prop.

Interactive example

Web component

React

Show full code

<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

Show full code

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

With clearing value

The date input can be cleared by setting thevalue attribute to one of the following:

empty string
null
undefined

Interactive example

Update date

Set null

Set Empty String

Set undefined

Web component

React

Show full code

<ic-date-input
id="date-input-clear-value"
label="When would you like to collect your coffee?"
date-format="DD/MM/YYYY"
value="21/01/2001"
></ic-date-input>
<ic-buttonid="update">Update date</ic-button>
<ic-buttonid="null-btn">set null</ic-button>
<ic-buttonid="empty-btn">set empty string</ic-button>
<ic-buttonid="undef-btn">set undefined</ic-button>

const[value, setValue]=useState("21/01/2001");
consthandleUpdate=()=>{
setValue(newDate("05 May 2005"));
};
consthandleClearValue=(newValue)=>{
setValue(newValue);
};
return(
<>
<IcDateInput
label="When would you like to collect your coffee?"
value={value}
/>
<divstyle={{ display:"flex", gap:"8px"}}>
<IcButtononClick={()=>handleUpdate()}>Update date</IcButton>
<IcButtononClick={()=>handleClearValue(null)}>Set null</IcButton>
<IcButtononClick={()=>handleClearValue("")}>
        Set Empty String
</IcButton>
<IcButtononClick={()=>handleClearValue(undefined)}>
        Set undefined
</IcButton>
</div>
</>
);

Last reviewed 22 July 2025 .