Date Picker For Custom Date Range

[E-LeeSchaffer]

Value Proposition

As a user I want to set individual date ranges In order to show transactions for the individual needs for a specific period easily.

Description

Acceptance Criteria

• The timeline filter includes a date picker for selecting custom date ranges.
• Users can select a start and end date in one calendar, and only transactions within that range are displayed.
• Upon selection the selected date is displayed in the custom date range button.
• The date picker prevents selection of an end date earlier than the start date.
• Users can reset the date range via x button which appears when the date range is selected .
• A message appears if no transactions match the selected date range.

  Tasks

• [x] Create feature branch feature/custom-date-range.
• [x] Add a custom date picker to allow users to select a specific date range.
• [x] Use JavaScript’s Date object or a date manipulation library to create start and end dates for each option.
• [x] In the TimelineFilter component, add date pickers for selecting a custom start and end date.
• [x] Implement validation to ensure the end date is not before the start date.
• [x] Upon submission, apply the custom date range filter to the transaction list.

[ahohnsen]

Hi there!

The current acceptance criteria could be expanded to give more clarity on expected behavior. For instance, mention what happens if an invalid date range is entered and clarify that the user can reset to view all transactions after applying a custom range. For example:

• The timeline filter includes a date picker for selecting custom date ranges.
• Users can select a start and end date, and only transactions within that range are displayed.
• The date picker prevents selection of an end date earlier than the start date.
• Users can reset the date range to view all transactions without any filters applied.
• A message appears if no transactions match the selected date range.

[F-Kirchhoff]

Hey, your AC are somehow missing the visible elements with the date picker. Please expand them to include which new elements are displayed and how they should behave.