How to Add Shortcuts to Date Picker Component (e.g., Yesterday, Last 7 Days)

[R_S_I_F]

I’m using a date picker component in my project, and I would like to enhance its functionality by adding predefined shortcuts like:
• Yesterday
• Last 7 Days
• Month-to-Date
• Year-to-Date

The idea is to allow users to select these ranges quickly without manually selecting start and end dates.

Could someone guide me on how to implement this? Are there any libraries or built-in features that support this? If not, what would be the best approach to add custom shortcuts to the date picker?

[R_S_I_F]

any idea ?

[Darren]

Hey @R_S_I_F! Thanks for reaching out.

I think the easiest way to implement the kind of functionality that you're describing is to populate a separate select component with the preset options and then control the dateRange component with an onChange event handler, similar to what I've put together below.

It ends up looking something like this:

You can check out the app JSON here (79.7 KB)! Let me know if you have any questions.