Date picker - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-date-picker
label="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 .

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[] - IcWeekDays[] \| undefined	[]
Property disableDaysMessage Attribute disable-days-message	The text to display as the validation message when`disableDays` is`true` and a disabled date is entered. type: string - string \| undefined	"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 - string \| undefined	"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 - string \| undefined	"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 - string \| undefined
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 the required label will still be read out by screen readers. type: boolean - boolean \| undefined	false
Property inputId Attribute input-id	The ID for the input field. The default will be an automatically generated value. type: string - string \| undefined
Property invalidDateMessage Attribute invalid-date-message	The text to display as the validation message when an invalid date is entered. type: string - string \| undefined	"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 - string \| undefined
Property openAtDate Attribute open-at-date	The date visible when the calendar opens. Used if no date is currently selected. 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 - Date \| string	""
Property required Attribute required	If`true` , the input will require a value. type: boolean - boolean \| undefined	false
Property showClearButton Attribute show-clear-button	If 'true', the 'X' button on the date input will be visible, which clears the field. type: boolean - boolean \| undefined	true
Property showDaysOutsideMonth Attribute show-days-outside-month	If`true` , days outside the current month will be visible in the date picker. type: boolean - boolean \| undefined	true
Property showPickerClearButton Attribute show-picker-clear-button	If`true` , the`Clear` button on the date picker will be visible. type: boolean - boolean \| undefined	true
Property showPickerTodayButton Attribute show-picker-today-button	If`true` , the`Go to today` button on the date picker will be visible. type: boolean - boolean \| undefined	true
Property size Attribute size	The size of the date picker to be displayed. type: IcSizes - "large" \| "medium" \| "small" \| undefined	"medium"
Property startOfWeek Attribute start-of-week	The first day of the week.`0` for Sunday,`1` for Monday, etc. Default is Monday. type: IcWeekDays - IcWeekDays.Friday \| IcWeekDays.Monday \| IcWeekDays.Saturday \| IcWeekDays.Sunday \| IcWeekDays.Thursday \| IcWeekDays.Tuesday \| IcWeekDays.Wednesday	IcWeekDays.Monday
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 validationAriaLive Attribute validation-aria-live	The value of the`aria-live` attribute on the validation message. type: IcAriaLive - "assertive" \| "off" \| "polite"	"polite"
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" \| undefined	""
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 picker. 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: IcDateValueFormat - 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: "DD/MM/YYYY"

Property

disableDays

The days of the week to disable.

type: IcWeekDays[] - IcWeekDays[] | undefined

Default: []

Property

disableDaysMessage

Attribute

disable-days-message

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

type: string - string | undefined

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 istrue and a date in the future is entered.

type: string - string | undefined

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 istrue and a date in the past is entered.

type: string - string | undefined

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

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 the required label will still be read out by screen readers.

type: boolean - boolean | undefined

Default: false

Property

inputId

Attribute

input-id

The ID for the input field. The default will be an automatically generated value.

type: string - string | undefined

Property

invalidDateMessage

Attribute

invalid-date-message

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

type: string - string | undefined

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

Property

openAtDate

Attribute

open-at-date

The date visible when the calendar opens. Used if no date is currently selected. 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 - Date | string

Default: ""

Property

required

Attribute

required

Iftrue , the input will require a value.

type: boolean - boolean | undefined

Default: false

Property

showClearButton

Attribute

show-clear-button

If 'true', the 'X' button on the date input will be visible, which clears the field.

type: boolean - boolean | undefined

Default: true

Property

showDaysOutsideMonth

Attribute

show-days-outside-month

Iftrue , days outside the current month will be visible in the date picker.

type: boolean - boolean | undefined

Default: true

Property

showPickerClearButton

Attribute

show-picker-clear-button

Iftrue , theClear button on the date picker will be visible.

type: boolean - boolean | undefined

Default: true

Property

showPickerTodayButton

Attribute

show-picker-today-button

Iftrue , theGo to today button on the date picker will be visible.

type: boolean - boolean | undefined

Default: true

Property

size

Attribute

size

The size of the date picker to be displayed.

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

Default: "medium"

Property

startOfWeek

Attribute

start-of-week