Date Picker (date_picker)
A date picker helps users select a single date.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| min_date | data-min-date | The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default. |
|
| max_date | data-max-date | The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in a later date will cause native form validation error. There is no default maximum date. |
|
| range_date | data-range-date | The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD. |
|
| hint | Hint | Hint for input into date field |
|
| required | Required | The date picker component will be required in terms of native form validation. |
|
| disabled | Disabled | The date picker component will be disabled/readonly. You can re-enable by executing the enable procedure on the component. |
|
| default_value | Default value | The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD. |
|
id: date_picker
label: 'Date Picker'
description: 'A date picker helps users select a single date.'
group: Forms
homepage: 'https://designsystem.digital.gov/components/date-picker/'
props:
min_date:
id: min_date
label: data-min-date
description: 'The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default.'
schema:
type: string
max_date:
id: max_date
label: data-max-date
description: 'The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in a later date will cause native form validation error. There is no default maximum date.'
schema:
type: string
range_date:
id: range_date
label: data-range-date
description: 'The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD.'
schema:
type: string
hint:
id: hint
label: Hint
description: 'Hint for input into date field'
schema:
type: string
required:
id: required
label: Required
description: 'The date picker component will be required in terms of native form validation.'
schema:
type: boolean
disabled:
id: disabled
label: Disabled
description: 'The date picker component will be disabled/readonly. You can re-enable by executing the enable procedure on the component.'
schema:
type: boolean
default_value:
id: default_value
label: 'Default value'
description: 'The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.'
schema:
type: string
examples:
preview:
id: preview
label: Preview
renderable:
'@component': date_picker
min_date: '0000-01-01'
hint: mm/dd/yyyy
required: true
mm/dd/yyyy