Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date range picker: range selection to day not intuitive (not consistent with react-day-picker) #3890

Open
Redirts opened this issue Dec 11, 2019 · 3 comments

Comments

@Redirts
Copy link

Redirts commented Dec 11, 2019

Environment

  • Package version(s): 3.22
  • Browser and OS versions: Firefox/Chrome 78.0 and Windows 10

Actual behavior

I have a range selected and I want to just select one specific day (without range).
The way this works in Date range picker (BlueprintJS) implementation is not intuitive and also it is not consistent with how it works in react-day-picker.

Blueprint Date range picker:
Video made directly from https://blueprintjs.com/docs/#datetime/daterangepicker

2019-12-11_12-47-58

Expected behavior

React-day-picker:
Video made directly from http://react-day-picker.js.org/examples/selected-range/

2019-12-11_12-48-44

This method makes much more sense to me.
If I have a range selected and click on either the start/end range day, then the range should be stopped and the individual day should be picked.

Possible solution

@adidahiya
Copy link
Contributor

It looks like you did not enable the "Allow single day range" option, can you try that?

@Redirts
Copy link
Author

Redirts commented Jan 7, 2020

No, it still does not behave as expected. See the video below:

2020-01-07_10-24-09

@LoiKos
Copy link

LoiKos commented Feb 14, 2022

Hi, I fall into this problem. I don't try it out but In this method :

private static getDefaultNextState(

I think there is a missing piece in the case of allowSingleDayRange to allow to start a range from a single day range:

private static getDefaultNextState(
        selectedRange: DateRange,
        day: Date,
        allowSingleDayRange: boolean,
    ): IDateRangeSelectionState {
        const [start, end] = selectedRange;

        let nextDateRange: DateRange;

        if (start == null && end == null) {
            nextDateRange = [day, null];
        } else if (start != null && end == null) {
            nextDateRange = this.createRange(day, start, allowSingleDayRange);
        } else if (start == null && end != null) {
            nextDateRange = this.createRange(day, end, allowSingleDayRange);
        } else {
            const isStart = areSameDay(start, day);
            const isEnd = areSameDay(end, day);
            if (isStart && isEnd) {
                nextDateRange = [null, null];
            } else if (isStart) {
                nextDateRange = [null, end];
            } else if (isEnd) {
                nextDateRange = [start, null];
            } else {
                if(allowSingleDayRange && areSameDay(start, end)){
                nextDateRange  = this.createRange(day, start, allowSingleDayRange);
                } else {
                nextDateRange = [day, null];
                }
            }
        }

        return { dateRange: nextDateRange };
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

3 participants