mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-09 03:32:54 -05:00
[Tech Debt] Change report date picker options to use date-range picker with quick-select buttons #2836
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/actual#2836
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @MatissJanis on GitHub (Jan 18, 2026).
The current date-picker with quick select options has gotten ridiculously long. It looks quite bad on desktop and even worse on mobile.
Objective:
Refactor it to use a date-range picker with quick-pick options.
The ideal solution would use react-aria as a base and extend it with the extras we need. This is because we already extensively use this dependency. Pulling in a new dependency could also work, but we need to evaluate it carefully (i.e. does it significantly increase the bundle size? is the dependency maintained? etc.)
Inspiration:
react-aria date-range picker: https://react-aria.adobe.com/DateRangePicker
daterangepicker: http://www.daterangepicker.com
Please post a screenshot mockup of your proposed UI/UX before sending a PR so we can discuss it. We do not assign issues to specific people.
@rznn7 commented on GitHub (Feb 7, 2026):
Hi!
Here is a proposition:
I assumed we still want to select at the month level, so react-aria's Calendar doesn't fit well (day-level only). I took visual inspiration from https://ant.design/components/date-picker#examples and built this using the existing component library (no new dependencies).
This replaces both the start/end Select dropdowns and the row of quick-select buttons with a single trigger button + popover.
Desktop:
Mobile:
Does this direction look good?
@MatissJanis commented on GitHub (Feb 10, 2026):
That's really good @rznn7 ! I will have some small nitpicks, but overall LGTM!
Some immediate nitpicks:
@rznn7 commented on GitHub (Feb 10, 2026):
Thanks for your feedbacks @MatissJanis !
I am not sure what you mean, are you talking about the "Jan", "Feb", etc. buttons? There is an hover effect, do you think we should make it more obvious that it is clickable?
I am not yet very aware of how everything works but the current code only allow selecting months right? That's why I choose this behavior. Is selecting more precise ranges a feature we'd want to implement? If so we should indeed design the new picker accordingly, though it would add quite a bit of complexity to the implementation.
@MatissJanis commented on GitHub (Feb 10, 2026):
Yep. Exactly those. Mobile doesn't have "hover", so we should account for that. I think if we make the background light gray would be sufficient.
I think a specific date range is definitely a useful feature to have. It also looks like pikaday - our current datepicker - has been archived and is no longer maintained. So switching away from it would actually be quite a good idea.
React aria has a good daterange picker. Maybe we could use that as a base since we already use so many of the react-aria components.
@rznn7 commented on GitHub (Feb 17, 2026):
Sorry, for the delay!
Here is quick test with react aria component:
Would it fit? (maybe with a background light gray on days as we discussed).
@MatissJanis commented on GitHub (Feb 18, 2026):
Love it!
@youngcw commented on GitHub (Feb 18, 2026):
Some more things that would be wonderful to add while you are looking at this. Either add an option to exclude the current month in the ranges, or allow the live range to be set to any range that will update every month. Currently you have to include the current month to use the live option.
@matt-fidd commented on GitHub (Feb 19, 2026):
This looks brilliant! Allowing selecting days is definitely the way to go, if people want months they can easily hit the 1st of the month they'd like.