Menü
Use when implementing select a range between two dates.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Use when implementing help users understand their current location.
Use when implementing expand and collapse content sections.
Use when implementing user account configuration and preferences.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.
| name | date-range |
| description | Use when implementing select a range between two dates. |
| metadata | {"id":"date-range","category":"forms","pattern":"Date Range","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/forms/date-range","sourcePath":"apps/web/content/patterns/forms/date-range.mdx"} |
Select a range between two dates
A Date Range component allows users to select both a start date and an end date, defining a continuous period of time. It extends the Date Picker pattern by introducing range visualization — highlighting the days between the two selected dates — and range-specific validation (end date must be after start date, minimum/maximum range length). Date Range is commonly implemented as either a dual input pair (two separate date fields with connected validation) or a single calendar panel/dual-panel UI with visual range highlighting as the user selects. start, minimum/maximum range enforcement, and accessible announcement of both selected dates." />
references/pattern.md, then choose the smallest viable variation.| Key | Action |
|---|---|
Tab | Moves between start input, end input, and calendar trigger |
Enter / Space | Opens the picker when on an input or trigger; confirms hovered date |
Arrow Right | Moves focus to the next day in the calendar |
Arrow Left | Moves focus to the previous day |
Arrow Down | Moves focus to the same day next week |
Arrow Up | Moves focus to the same day previous week |
Page Up | Navigates to the previous month |
The Problem: When users adjust the start date (e.g., from March 12 to March 15), automatically clearing the end date frustrates users who just want to shift the range by a few days.
How to Fix It? If the new start date is before the existing end date, keep the end date. Only clear it if the new start date is after the end date.
function onStartDateChange(newStart) {
if (endDate && newStart < endDate) {
// Keep end date — range is still valid
} else {
setEndDate(null); // Only clear if invalid
}
setStartDate(newStart);
}
The Problem: After the user clicks a start date, the calendar appears unchanged — there's no indication that the system is waiting for an end date selection.
How to Fix It? Show instructional text and a hover-preview of the potential range.
calendar.addEventListener('mouseover', (e) => {
if (selectingEndDate && e.target.matches('.calendar__day-btn')) {
const hoverDate = getDateFromCell(e.target);
if (hoverDate > startDate) {
highlightRange(startDate, hoverDate, 'preview');
}
}
});
The Problem: Rental and booking systems often have minimum stays. Not enforcing these visually (by disabling cells within the minimum range of the start date) allows users to select invalid ranges.
How to Fix It? After start date selection, disable all cells within the minimum range.
function getDisabledDatesForEndSelection(startDate, minDays) {
const disabled = [];
for (let i = 1; i < minDays; i++) {
const d = new Date(startDate);
d.setDate(d.getDate() + i);
disabled.push(d);
}
return disabled;
}
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/forms/date-range