A date picker helps users select a single date.
When to use the date picker component
- Scheduling. When users need to schedule or record an event and benefit from the context of a calendar.
- When the day of the week is important. When knowing the day of the week helps users choose a specific date.
When to consider something else
- Familiar dates. When asking users for a date they know well, or can look up without using a calendar (like a birthday), use date input fields.
- When the day of the week is irrelevant. If there's no benefit to knowing the day of the week for a particular date, consider date input fields.
- Describe the date format. Provide a hint of
mm/dd/yyyyto help users enter the proper date format if they opt not to use the date picker.
- Customize accessibly. If you customize the date picker, ensure it continues to meet the the accessibility requirements that apply to all form controls.
- Initialization properties. The following properties update the component during initialization. These properties must be set before the component is initialized in order to have an effect.
|required||input||The date picker component will be required in terms of native form validation.|
|disabled||input||The date picker component will be disabled/readonly. You can re-enable by executing the
|data-default-value||.usa-date-picker||The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.|
- Component properties. The following properties modify component functionality. These properties can be set or adjusted at any time before or after initialization in order to have an effect.
|data-min-date||.usa-date-picker||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.|
|data-max-date||.usa-date-picker||The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in an later date will cause native form validation error. There is no default maximum date.|
|data-range-date||.usa-date-picker||The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD.|
- Additional component procedures. The following static procedures update the component after initialization. These are in addition to the primary methods referenced in the JS customization documentation.
|enable||.usa-date-picker element||The date picker component will be enabled.|
|disable||.usa-date-picker element||The date picker component will be disabled/readonly.|
Date picker settings
This component has no settings.
Date picker variants
This component has no variants.