Finance: Date range filter selection shouldn't be applied by default

[dizzypaty]

As a user, I want to be able to select a date range to export my Finance app transfers.

• Date range should be deselected by default displaying the following hint text: ‘Start date’ and ‘End date’, until user makes a date selection.
• We should indicate today’s date and open the calendar on the current month
• We should include an Apply and Clear buttons, that removes the current date range selection

[dizzypaty]

Large form factor

Small form factor

Figma files

[AquiGorka]

@dizzypaty for mobile/reponsive do we show two sets of clear/apply buttons? And two titles? with two calendars? Or is it one calendar? If it is one calendar is there a reference to which date (start or end) is the user choosing?

[dizzypaty]

@AquiGorka

For mobile/responsive do we show two sets of clear/apply buttons?

No, only one

And two titles? with two calendars? Or is it one calendar?

Just one calendar, full screen

If it is one calendar is there a reference to which date (start or end) is the user choosing?

When users tap on the (start/end) date range component, the calendar opens up in a modal, in the current month and displaying today's date. Then, users can select the date range starting by the start date or the end date, as they wish, as it should behave in the same way.

In the example below, the user selects the 9th of March as the start date and this is reflected on the date range component on top of the calendar. They can scroll down or use the month arrows to select the end date. If they decide to scroll up to go to the previous month, then the start date is refreshed to reflect the new selection. Same behavior for the end date.

Let me know if you need a prototype to help visualize the behavior better! 🛠

[sohkai]

Closing for now since the original behaviour was fixed. We will re-implement the dual DatePicker as a separate task.