A date range picker helps users select a range between two dates.
When to use the date range 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
- When the day of the week is irrelevant. If there's no benefit to knowing the day of the week for a date or range, 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.
|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.|
Date range picker settings
This component has no settings.
Date range picker variants
This component has no variants.