DateRangePicker: add ability for predefined ranges

[hoorayimhelping]

Adds predefined monthly -ranges to the DateRangePicker.

The ranges are added by using the prop predefinedDatesCount. Up to 6 months can be added. 6 adds months in the future, -6 adds months in the past.

<DateRangePicker
  onSelectDateRange={handleSelectDate}
  predefinedDatesCount={-6}
/>

Video

Screen.Recording.2025-06-09.at.12.19.54.PM.mov

Screenshots

Dropdown

Dropdown and custom date range picker

The custom date range picker after selecting a range (the current month)

Full month selected

Fewer than 6 ranges

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2025 4:29pm

[crisalbu]

Hey @hoorayimhelping , sorry for the late reply.

I was wondering, could we do this instead? I realize you may need to make more than a simple change, but it would look better I think 🙂