Use a date range picker when users must choose a continuous start and end period; use a date picker for one calendar date, date input for known exact dates, and a filter panel when date is only one criterion among many.
Use a date range picker when users must choose a continuous start and end period; use a date picker for one calendar date, date input for known exact dates, and a filter panel when date is only one criterion among many.
Practice the judgment: Imagine this situation: The interface allows an end date before the start date and stores a negative duration. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Date range picker | Date picker | Date input | Filter panel |
|---|---|---|---|---|
| UI or UX | UI + UX - Two date fields with attached range calendar and apply controls | UI + UX - Single-date text field with attached calendar menu | UI + UX - Grouped manual exact-date entry | UI + 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. | Preserve every typed part, tolerate common month names, normalize to a canonical date only after validation, and explain exactly which part is missing, impossible, or out of range. | 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 calendar highlights only the first and last dates, leaving included days visually indistinguishable from unselected days. | A grid of unlabeled numbers uses pale grey for unavailable dates but still lets users click them before showing a late error. | A single date field shows DD/MM/YYYY inside the input and removes the only instruction when users start typing. | A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading. |
| 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. | The date is far in the past, such as a birthday or historic document date. | 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. | Applied state with active-filter count, result count, and removable applied criteria near the results. |
| Accessibility burden | Label start and end fields separately and associate each hint and error with the correct field. | Give the calendar button an accessible name and state that distinguishes opening from closing the menu. | 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 | Collapsing the range into one unlabeled field with ambiguous dash-separated dates. | Using a calendar picker for a date of birth or other remembered historic date. | Using one freeform field with disappearing format instructions. | Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set. |