Search & Filter Pane: Create a date range filter component

As a librarian
I want a set of results returned based on a date range

Date Range Filter component capabilities

• Must support the ability for a user to enter a date (required)
• Component should support dates in the following format yyyy-mm-dd
• Must have values in Start Date and End Date fields
• Must support ability for user to apply this filter without a search term
• This component must be accessible by keyword and have applicable aria labels/regions applied to be used by a screenreader
• Should be able to reset the component in same manner as one can reset any component (using "X" or Reset all link)
• Go/apply button: Any filter selection and/or search query entered must be honored when user hits the Go/apply button
• Error handling
  • display start or end date specific errors below applicable input boxes
  • display not specific to start or end date errors below the filter.

This component must support the following use cases
Given I enter start date and end date using a keyboard
AND the dates entered are formatted properly [yyyy-mm-dd]
When I hit Go/Apply button next to this date range component
Then return results based on the start and end dates entered

Given I select several filters
When I enter values for this date range component
AND I hit Go/Apply button next to this date range component
Then return results based on the start and end dates entered AND filters already selected

Given I added a search term
When I enter values for this date range component
AND I hit Go/Apply button next to this date range component
Then return results based on the start and end dates entered AND search

Given results returned are based on date range component values
When I select a filter(s)
Then return results based on the date range component values and filter(s) selected

Given results returned are based on date range component values
When I enter a search term
Then return results based on the date range component values and search

Given I enter date range component values
AND I do not hit Go/Apply on the component
When I enter search term
AND hit search
Then display results based on date range values AND search term

Given I enter a start date
When I do not enter an end date
Then display message [Please enter an end date]

Given I enter an end date
When I do not enter a begin date
Then display message [Please enter a start date]

Given I enter a start or end date
When start or end date is in invalid format or enters invalid characters
Then display a message [Invalid date format.]

Given I enter a start date and an end date
When the start date is greater than the end date
Then display a message [Start date is greater than end date.]

Given I enter an invalid start and/or end date
When I hit the search button
Then display the standard no results found message