UX Patterns Guide
Back to compare picker

Date range picker vs Date picker vs Date input vs Filter panel

Prefer date range picker when the answer is a continuous period with a start date, an end date, and visible days between them.

Date range picker live exampleDate picker live exampleDate input live exampleFilter panel live example

Decision dimensions

Dimension Date range pickerDate pickerDate inputFilter panel
UI or UX UI + UX - Two date fields with attached range calendar and apply controlsUI + UX - Single-date text field with attached calendar menuUI + UX - Grouped manual exact-date entryUI + UX - Grouped filter control panel for narrowing a current result set
UI guidance Render separate labelled start and end date fields with persistent format hints, a calendar trigger, and a shared calendar menu that shows both endpoints and the days between them.Render a labelled date text field with a persistent format hint and a calendar button that opens a month grid aligned to the field.Render day, month, and year as separate text inputs inside one fieldset with a legend that asks the full date question and a hint containing a valid example date.Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.
UX guidance Use a date range picker when users need to select or inspect a continuous period such as a report window, trip, event, booking, campaign, or eligibility span.Use a date picker when choosing a date requires calendar context such as weekday, nearby availability, booking windows, deadlines, or recent/future scheduling.Use date input when users already know the exact date or can look it up without needing calendar context.Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.
Good UI An analytics report control shows Since and Until text fields, quick choices for Today and Last 7 days, a two-week calendar grid, selected August 3 start, selected August 14 end, and a filled band for days inside the range.An appointment booking field shows Appointment date, hint mm/dd/yyyy, a calendar button, July 2026 grid, disabled weekends, today marker, and selected July 14 date.A passport issued question uses a fieldset legend, hint example 27 3 2007, separate Day, Month, and Year labels, numeric input mode, and a group error that names the missing year.A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.
Bad UI A report filter has one field labelled Date and silently stores two dates separated by a dash with no start or end labels.A date of birth field opens today with no text fallback and forces users to page backward month by month through decades.A single date field shows DD/MM/YYYY inside the input and removes the only instruction when users start typing.A filter drawer closes with no active count, leaving users unaware that filters are still hiding records.
Good UX A user chooses Last 7 days, sees 2026-08-08 through 2026-08-14 filled in the calendar, reviews both inputs, then applies the range.A user opens the calendar, sees weekends unavailable, moves to August, chooses Tuesday 11 August 2026, and reviews stored value 2026-08-11.A user types 7 Jan 1984, sees month normalized to 01, submits, and reviews canonical value 1984-01-07.A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.
Bad UX A dashboard refreshes on every hovered day while the user is still deciding the end date.A user selects a disabled Saturday because it was only dimmed, then loses their previous month when the error appears.A user pastes a known birth date into a masked field and the interface discards separators and jumps focus unpredictably.Applying a filter silently resets the query, sort order, current page, and view density.
Best fit Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.Users are scheduling, booking, planning, or selecting a recent or future date.Users already know the exact date or can look it up easily.Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.
Avoid when The task asks for only one exact date.Users already know the exact date and do not need calendar context.Users are unlikely to know the exact date.The result set is small enough that scanning is faster than filtering.
Required state Empty start and end fields with visible labels, date-format hints, and a calendar trigger.Closed labelled text field with visible date-format hint and calendar button.Empty untouched grouped date fields with legend, hint, and visible part labels.Default state with no user-applied filters and an explicit result count.
Accessibility burden Label start and end fields separately and associate each hint and error with the correct field.Use a visible label and persistent hint for the text field; do not rely only on text inside the field.Group the three inputs in a fieldset with a legend that states the full date question.Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse Using two unrelated single-date pickers that do not validate order or show included days.Using a calendar picker for a date of birth or other remembered historic date.Using one freeform field with disappearing format instructions.Hiding active filters inside a closed panel with no count, chips, or result-state summary.

Date range picker

UI or UX
UI + UX - Two date fields with attached range calendar and apply controls
UI guidance
Render separate labelled start and end date fields with persistent format hints, a calendar trigger, and a shared calendar menu that shows both endpoints and the days between them.
UX guidance
Use a date range picker when users need to select or inspect a continuous period such as a report window, trip, event, booking, campaign, or eligibility span.
Good UI
An analytics report control shows Since and Until text fields, quick choices for Today and Last 7 days, a two-week calendar grid, selected August 3 start, selected August 14 end, and a filled band for days inside the range.
Bad UI
A report filter has one field labelled Date and silently stores two dates separated by a dash with no start or end labels.
Good UX
A user chooses Last 7 days, sees 2026-08-08 through 2026-08-14 filled in the calendar, reviews both inputs, then applies the range.
Bad UX
A dashboard refreshes on every hovered day while the user is still deciding the end date.
Best fit
Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.
Avoid when
The task asks for only one exact date.
Required state
Empty start and end fields with visible labels, date-format hints, and a calendar trigger.
Accessibility burden
Label start and end fields separately and associate each hint and error with the correct field.
Common misuse
Using two unrelated single-date pickers that do not validate order or show included days.

Date picker

UI or UX
UI + UX - Single-date text field with attached calendar menu
UI guidance
Render a labelled date text field with a persistent format hint and a calendar button that opens a month grid aligned to the field.
UX guidance
Use a date picker when choosing a date requires calendar context such as weekday, nearby availability, booking windows, deadlines, or recent/future scheduling.
Good UI
An appointment booking field shows Appointment date, hint mm/dd/yyyy, a calendar button, July 2026 grid, disabled weekends, today marker, and selected July 14 date.
Bad UI
A date of birth field opens today with no text fallback and forces users to page backward month by month through decades.
Good UX
A user opens the calendar, sees weekends unavailable, moves to August, chooses Tuesday 11 August 2026, and reviews stored value 2026-08-11.
Bad UX
A user selects a disabled Saturday because it was only dimmed, then loses their previous month when the error appears.
Best fit
Users are scheduling, booking, planning, or selecting a recent or future date.
Avoid when
Users already know the exact date and do not need calendar context.
Required state
Closed labelled text field with visible date-format hint and calendar button.
Accessibility burden
Use a visible label and persistent hint for the text field; do not rely only on text inside the field.
Common misuse
Using a calendar picker for a date of birth or other remembered historic date.

Date input

UI or UX
UI + UX - Grouped manual exact-date entry
UI guidance
Render day, month, and year as separate text inputs inside one fieldset with a legend that asks the full date question and a hint containing a valid example date.
UX guidance
Use date input when users already know the exact date or can look it up without needing calendar context.
Good UI
A passport issued question uses a fieldset legend, hint example 27 3 2007, separate Day, Month, and Year labels, numeric input mode, and a group error that names the missing year.
Bad UI
A single date field shows DD/MM/YYYY inside the input and removes the only instruction when users start typing.
Good UX
A user types 7 Jan 1984, sees month normalized to 01, submits, and reviews canonical value 1984-01-07.
Bad UX
A user pastes a known birth date into a masked field and the interface discards separators and jumps focus unpredictably.
Best fit
Users already know the exact date or can look it up easily.
Avoid when
Users are unlikely to know the exact date.
Required state
Empty untouched grouped date fields with legend, hint, and visible part labels.
Accessibility burden
Group the three inputs in a fieldset with a legend that states the full date question.
Common misuse
Using one freeform field with disappearing format instructions.

Filter panel

UI or UX
UI + UX - Grouped filter control panel for narrowing a current result set
UI guidance
Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.
UX guidance
Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.
Good UI
A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.
Bad UI
A filter drawer closes with no active count, leaving users unaware that filters are still hiding records.
Good UX
A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.
Bad UX
Applying a filter silently resets the query, sort order, current page, and view density.
Best fit
Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.
Avoid when
The result set is small enough that scanning is faster than filtering.
Required state
Default state with no user-applied filters and an explicit result count.
Accessibility burden
Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse
Hiding active filters inside a closed panel with no count, chips, or result-state summary.
Decision rules
  • Prefer date range picker when the answer is a continuous period with a start date, an end date, and visible days between them.
  • Prefer date picker when the task asks for one appointment, deadline, publication date, or booking date rather than a span.
  • Prefer date input when users already know both dates and day-of-week context does not affect the answer.
  • Prefer filter panel when date range is one of several draft filters that must be applied together with status, owner, category, or sort criteria.
  • Use presets such as Today, Last 7 days, or BFCM only when they match common user tasks and can be reviewed as explicit start and end dates.
  • Show separate labels and editable values for start and end so users can correct one boundary without losing the other.
  • Highlight start, end, in-range days, hover preview, disabled dates, out-of-window dates, empty state, and invalid-order state because range meaning depends on relationships between days.
  • Keep the picker open until both boundaries are chosen and, for analytical or reporting ranges, require Apply or Cancel before changing results.
  • Reject or repair an end date before the start date with a specific message that names both boundaries.
  • Do not use a range picker for approximate periods such as summer 2026, fiscal Q3, or next quarter if those are better represented by a preset list or plain text.
Inspect live examples
Date range pickerDate pickerDate inputFilter panel
Failure modes
  • A range picker closes immediately after the start date, leaving no clear way to choose the end date.
  • Start and end fields share one label, so screen reader users cannot tell which boundary they are editing.
  • The interface allows an end date before the start date and stores a negative duration.
  • A reporting dashboard updates results on every day focus instead of waiting for Apply.
  • Only the two endpoint dates are highlighted, so users cannot see which days are included in the range.
  • A broad filter panel hides date range changes behind unrelated filters and never summarizes the active start and end dates.