adobe / adobe/react-spectrum

Allow independent selection of either start or end date with useRangeCalendar

Open
#4,723 7 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🙋 Feature Request

Currently, there's no way to be able to only change the end date after you have a range selected. It would be good to have functionality for this.

## 🤔 Expected Behavior

Should be allowed to select only start or end as well as the entire range.

## 😯 Current Behavior

Limited to selecting the entire range each time.

## 🔦 Context

I'm trying to build a calendar implementation similar to the Google Flights calendar. I have two input fields and using the `useRangeCalendar` hook.

Where a user can select a date range, and then at a later point, allowed to change only the start date or end date whilst keeping the rest of the range.

## 💻 Examples

Google Flights calendar [implementation](https://www.google.com/travel/flights)
And also by this [library](https://codesandbox.io/s/react-google-flight-datepicker-zultp)

## 🧢 Your Company/Team

Contributor guide

Open the contributing guide

Research direction

Start at the useRangeCalendar hook and inspect how it currently handles an already-selected range. Define the selection behavior for changing only the start or end while preserving the other date, and verify that selecting a complete range still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.