<Notice>
  <Text>
    If you're building a form, use the <Link label="DateRangeInput" href="/packages/date-input/#daterangeinput" /> as it
    supports the FieldContext.
  </Text>
</Notice>

## Usage

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](/patterns/filtering/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](/packages/date-input/) for the controlled state.

```tsx live
const [dateRange, setDateRange] = useState<DateRange>();

return (
  <Flex flexDirection="column">
    <Box>
      <DateDropdown value={dateRange} onChange={setDateRange} />
    </Box>

    <ResponseBlock prefix="Date range:" value={JSON.stringify(dateRange)} />
  </Flex>
);
```

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.

## Label

By default, the date dropdown's label is "Date range". Use the `label` prop if you need a custom label.

```tsx live
const [dateRange, setDateRange] = useState<DateRange>();

return (
  <Box>
    <DateDropdown label="Custom label" value={dateRange} onChange={setDateRange} />
  </Box>
);
```

## initialDisplayDate

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.

```tsx live
const [dateRange, setDateRange] = useState<DateRange>();

return (
  <Box>
    <DateDropdown initialDisplayDate={new Date(1983, 2, 1)} value={dateRange} onChange={setDateRange} />
  </Box>
);
```

## Limiting viewable years

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 100 years in the past, and the `toYear` is set 100 years into the future.

In the following example, only dates between 1979 and 1980 are selectable.

```tsx live
const [dateRange, setDateRange] = useState<DateRange>();

return (
  <Box>
    <DateDropdown fromYear={1979} toYear={1980} value={dateRange} onChange={setDateRange} />
  </Box>
);
```

## Disabled dates

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](#limiting-viewable-years) to limit what dates are displayed to the user.

```tsx live
const [dateMultiple, setDateMultiple] = useState<DateRange>();
const [dateRange, setDateRange] = useState<DateRange>();
const [dateBeforeAfter, setDateBeforeAfter] = useState<DateRange>();
const [dateDayOfWeek, setDateDayOfWeek] = useState<DateRange>();

return (
  <Flex flexDirection="column" gap="medium">
    <Box>
      <DateDropdown
        label="Disabled single dates"
        value={dateMultiple}
        onChange={setDateMultiple}
        initialDisplayDate={new Date(2023, 3, 1)}
        disabledDates={[
          new Date(2023, 3, 5),
          new Date(2023, 3, 6),
          new Date(2023, 3, 8),
          new Date(2023, 3, 10),
          new Date(2023, 3, 11),
          new Date(2023, 3, 12),
        ]}
      />
    </Box>

    <Box>
      <DateDropdown
        label="Disabled from to"
        value={dateRange}
        onChange={setDateRange}
        initialDisplayDate={new Date(2023, 3, 1)}
        disabledDates={[{ from: new Date(2023, 3, 3), to: new Date(2023, 3, 16) }]}
      />
    </Box>

    <Box>
      <DateDropdown
        label="Disabled before after"
        value={dateBeforeAfter}
        onChange={setDateBeforeAfter}
        initialDisplayDate={new Date(2023, 3, 1)}
        disabledDates={[{ before: new Date(2023, 3, 10) }, { after: new Date(2023, 3, 14) }]}
      />
    </Box>

    <Box>
      <DateDropdown
        label="Disabled days of week"
        value={dateDayOfWeek}
        onChange={setDateDayOfWeek}
        initialDisplayDate={new Date(2023, 3, 1)}
        disabledDates={[{ dayOfWeek: [0, 6] }]}
      />
    </Box>
  </Flex>
);
```

## Dropdown positioning

### Side

The `side` prop is used to define the position of the dropdown. The supported values are: `"top" | "right" | "bottom" | "left"`. Defaults to `bottom`.

### Align

The `align` prop is used to define the alignment of the dropdown. The supported values are: `"start" | "center" | "end"`. Defaults to `start`.

A dropdown control that allows the user to select a date range from a calendar.

DateDropdown

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources