[BUG] RangePicker does not allow selecting of a range covering some disabled days

[coling]

Expected Behavior

I wish to use the Range Picker to select a start day and end date. Check-ins and Check-outs must be Saturdays, so disabledDays is populated such that it includes all dates which are not Saturdays.

I expect to be able to select the range of my choice.

Current Behavior

Selecting the start date is fine, but when selecting the end date, the onChange event fires with a "to" value the same as "from" (i.e. it appears to be clamped to the first non-disabled day).

Possible Solution

The Range Picker shouldn't clamp the output to disabledDays and return the to value the user chose.

Your Environment

• React Version: 16.14

Additional Comments

Simple reproduction case:

<RangePicker
          numberOfMonths={1}
          initialMonthAndYear="2021-08"
          onChange={(dates) => window.console.log(dates)}
          disabledDays={['2021-08-01','2021-08-02','2021-08-03','2021-08-04','2021-08-05','2021-08-06','2021-08-08','2021-08-09','2021-08-10','2021-08-11','2021-08-12','2021-08-13','2021-08-15','2021-08-16','2021-08-17','2021-08-18','2021-08-19','2021-08-20','2021-08-22','2021-08-23','2021-08-24','2021-08-25','2021-08-26','2021-08-27','2021-08-29','2021-08-30','2021-08-31']}
        />

If you select, e.g. the 7th August, and then select 14th of August as the end date, the onChange event will return log Object { from: "2021-08-07", to: "2021-08-07" }, i.e. starting and ending on the 7th. I've done more extensive testing allowing a few days to be non-disabled after the start date and it does set the "to" value to be as long as possible up to the first non-disabled date.

I presume this is a valid use case for "disabledDays" (the meaning of them being "disabled" changes slightly after the start day has been selected - it can (as in this case) mean an invalid choice of end date, rather than something which cannot be spanned)

Thanks for the awesome component BTW :-)

[samsam-ahmadi]

Hey @coling,
I checked your approach and this is a feature that you can't select the disabled days in the range, For example, these days are reserved by other people and you can't select them in your range date, So in this case from and to will be 2021-08-07

if you want to be able to select them, we can add a prop to be able to select disable days in the range, for example, that name can be beAbleToSelectDisables

What do you thinking about that?

[coling]

I think having a prop to override the behaviour would be a fine solution and give flexibility.

On the naming of it however, I'd suggest something different perhaps allowDisabledDaysSpan? This is because even in this mode, you cannot select a disabled day, but you can span them with your range selection. Does that make sense?

[samsam-ahmadi]

@coling
Good Point I agree with that.

[coling]

Thanks for the fixes (not had a chance to test them yet - looks OK at first glance!) but the README.md had some trailing fluff in it. I've fixed that up in #19

Hope that helps.

[samsam-ahmadi]

@coling Hey, I didn't release a version for it, I have a problem with the new version of the storybook, and the build is failed.
I tried to fix it but we have a problem with the new version of typescript.

[coling]

@coling Hey, I didn't release a version for it, I have a problem with the new version of the storybook, and the build is failed.
I tried to fix it but we have a problem with the new version of typescript.

Yeah, seems it's related to typescript 4.3 as covered in this storybook issue. Pinning it to "4.2.x" (and getting 4.2.4) in package.json allowed me to run storybook fine here. I can push a PR for that change for now if you want to release this, but no rush on my part (I did test the changes in Storybook tho', and works great - thanks!!)

[samsam-ahmadi]

@coling Yes, exactly the problem comes from the typescript
yes please feel free to raise a PR
Thank you

[samsam-ahmadi]

Thanks @coling
I released the @1.6.4 version.
you can see it here:
https://killthejs.com/react-trip-date/?path=/story/range-picker-component--allow-disabled-days-span

[coling]

Awesome! Thanks so much. Will hopefully be using this component soon and will try and spend some time improving it generally in the future as needs arise 😃

[coling]

Actually, it seems the package.json doesn't have a version bump in it.

Is it just a matter of bumping this or, because of the github tag do we need to push it right up to version 1.6.5 in package.json and release/tag it?

[samsam-ahmadi]

@coling Ahh, I see sorry about that.
I released a new version v1.6.5.
Thanks.