Dev: Add start/end time filter to selected days (e.g. "8am - 5pm")

[kuusinc]

Dependency

• Dev: Add multi-select date filters (e.g. "Mon and Wed") #2278

Overview

As a user, I want to add start and end times to selected days, so I can see only pantries and meal programs that are open during times that work with my schedule.

Details

This task builds on the multiple-day filter. Once users can select multiple days, they should also be able to add a start and end time for each selected day. This will make it easier for food seekers to find pantries and meal programs that are open during the specific time windows when they are available.

Use case:

"I need to go to a pantry that is open on Monday after I drop off my kid at school at 8am but before my work shift starts at 10am. On Tuesdays I work the earlier shift, so I can only go after work at 3pm until afterschool pick up at 5:45pm."

Changes

Add start and end time fields to each selected day, so users can filter results by the hours they are available on that day.

UI notes:

• Add start and end time fields for each selected day.
• Time fields should use dropdowns.

Acceptance criteria:

• Users can select a start time, end time, or both for one or more selected days of the week.
• Users can set different time ranges for different selected days.
• If no hours are selected for a selected day, results include locations open at any time on that day.
• If only a start time is selected for a selected day, results include locations open at or after that time on that day.
• If only an end time is selected for a selected day, results include locations open at or before that time on that day.
• If both a start and end time are selected for a selected day, results include locations with open hours that overlap with the selected time range.
• Results include locations that match at least one selected day and selected time range.

Wireframe:
Something like this, using dropdowns for the time fields. This allows users to select only days, or days with specific time ranges.

• Sunday ........from: ______ to: ______
• Monday.........from: ______ to: ______
• Tuesday........from: ______ to: ______
• Wednesday...from: ______ to: ______
• Thursday ......from: ______ to: ______
• Friday ...........from: ______ to: ______
• Saturday .......from: ______ to: ______

Date and Time Pickers UI: https://mui.com/x/react-date-pickers/validation/

Use two instances of "TimePicker" to display the start and end times:

Do NOT Use TimeRangePicker:

Notes:

• If possible, default to "Any" instead of a time for all time fields. If not possible with this time picker, then default to "12:00am" to "11:59pm"
• Add a 'reset' or 'any' option on the time picker itself for if user decides against a specific time.

Action Items

• Dev review and request any refinements
• Dev implementation

Resources