# Date range picker

Date range picker: a free component, built on your design tokens, to use for filtering a report or table by dates. Pick a start and end day from two months side by side, or one quick range such as last 7 days, then apply it to a report.

Prompt: Add the OpenDesigner component date-range-picker to this project: https://opendesigner.dev/library/r/date-range-picker.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, selected start, in range, selected end, today, disabled future day, picking end.

Accessibility: Every day is a button with its full date as its label and aria-pressed on the start and end; today has aria-current, future days are disabled, and the range length is announced in a polite live region.

File: https://opendesigner.dev/library/r/date-range-picker.html
