DateDropdown
A dropdown control that allows the user to select a date range from a calendar.If you're building a form, use the DateRangeInput as it supports the FieldContext.
The <DateDropdown /> component enables the user to select a from date and to date from a date picker dropdown. It's primarily used as a quick filter control, see the Filtering pattern examples for more information.
The date dropdown is a controlled component so it is required to provide the value and onChange props. Use the DateRange type definition from @eds/date-input for the controlled state.
NOTE: This component, unlike <DateRangeInput />, auto-sets the end date to the start date's end of day when selecting a start date. This special behaviour supports its main function as a quick filter control, immediately filtering data upon value selection.
By default, the date dropdown's label is "Date range". Use the label prop if you need a custom label.
The initialDisplayDate prop sets the month and year that is displayed in the calendar view when no date has been input. It defaults to the current month and year.
In the following example it's set to March 1983.
The fromYear and toYear props limit what years will be shown to the user in the calendar view. By default the fromYear is set to 1900, and the toYear is set two years into the future.
In the following example, only dates between 1979 and 1980 are selectable.
The disabledDates prop allows dates to be disabled from selection or input by the user.
It accepts a DateMatcher type which is an array that can contain a single date, an array of dates, a date range, "before" or "after" dates, days of the week, or any combination of the above.
Note that disabledDates will prevent the user from selecting dates, but will not limit what dates are visible. See Limiting viewable years to limit what dates are displayed to the user.
The side prop is used to define the position of the dropdown. The supported values are: "top" | "right" | "bottom" | "left". Defaults to bottom.
The align prop is used to define the alignment of the dropdown. The supported values are: "start" | "center" | "end". Defaults to start.