Date Range Issues

[ept-Ayush]

Please see the codesandbox

https://codesandbox.io/p/devbox/range-with-context-hooks-forked-9ll4x4?file=%2Fsrc%2Fapp.tsx%3A62%2C10&workspaceId=cdc8aeba-148c-4e68-9e2d-c7ad92a84380

Here you can see , we can not go to the feb although we have disabled past but still if defaultvalue is provided it should be visible.

Practical scenario would be lets say in past someone had selected that range and we are only enabling dates from today's date. 1 month after he want to see the calendar he cannot see.

Another issue is if the range selection is of 2 months its not showing the two months together we have to go back to see that which doesn't make sense.

Can you please check this @Feshchenko ?

[Feshchenko]

Hey, @ept-Ayush Your link is not working.

[ept-Ayush]

Hey, @ept-Ayush Your link is not working.

@Feshchenko Thanks for response. Sorry for that it was private Try this.

Also one more thing I wanted to confirm I am trying create something similar to AIRBNB DATEPICKER where

1. if you see once you select the start date and endDate and after that you again click the date which is after the startDate the range selection is getting changed. but if click before the startdate that date will become new start date
   

2. if you click on the enddate first so enddate is getting selected and one can select the start date before the end date but if someone selected greater than enddate so that date become start date again and user have to choose the end date.
   

Do we have these features?

[Feshchenko]

1. I see the issue describe in the first post and it is an edge case. Possible solution if you allow to select only from the current date and further, you should handle it, reset user range and show message about it.
2. We don't support functionality like on airbnb screenshots

[ept-Ayush]

1. We can allow from the selection from current date but as I said he selected that range in Feb itself now he is seeing that range in April so it has to show. and even its happening for the future date itself if you select march and April as a default value it will not show March & April together which I think is a bug.

2. For that is it possible that in https://github.com/rehookify/datepicker/blob/main/packages/datepicker/src/use-days.ts we can give a option weather we want to trigger onDatesChange from inside or not ? By that I think I can create these features.

@Feshchenko Also another thing is if we want to set only endDate and startDate as blank we can not set that we get errors as mentioned in #48

[ept-Ayush]

1. I see the issue describe in the first post and it is an edge case. Possible solution if you allow to select only from the current date and further, you should handle it, reset user range and show message about it.

@Feshchenko Regarding this we have one more issue

if today is March 31 2024 we have March and April calendar on the screen with left navigation button as disabled and right month button as enabled. Now if click right button and go to next available months, that is, April and May but now left icon is disabled although today is 31 March (even we disable the past date). Can we expect any solution for this?

MicrosoftTeams-video.4.mp4

[Feshchenko]

@ept-Ayush please provide link to the codesandbox
What version of the datepicker is installed?

[ept-Ayush]

@Feshchenko I have checked that with 6.6.0 on 31 March. Its happening if the day is last day of the month (31 March 2024) and the next month have less dates (30 Apr 2024). But I can't produce that from outside now as todays date is different can't reproduce that same scenario from outside may be if you try, you will be able to get that issue from inside in that specific sceanrio. The issue is might be in subtractOffset nextDate variable, its seems it was getting some wrong value and hence resulting the minDateAndBefore(minDate, nextDate) in true and making isDisabled true. where minDate was 31 March 2024 and next Date was 29 Feb.

** Here in my scenario state.offsetDate and minDate was new Date(2024, 2, 31) and negativeOffsetValue was {days: -0, months: -1, years: -0}**

const offsetDate = getEdgedOffsetDate(state.offsetDate, negativeOffsetValue, minDate);
const nextDate = getNextOffsetDate(offsetDate, negativeOffsetValue);

// will get this true which is wrong
const isDisabled = !!disabled || minDateAndBefore(minDate, nextDate); 

And I guess it will be in 6.6.1 as well as I have compared the changes.

Here's sample codesandbox but you will not get the issue as the date is changed.

https://codesandbox.io/p/devbox/range-with-context-hooks-forked-9ll4x4?file=%2Fsrc%2Fapp.tsx%3A54%2C16&workspaceId=cdc8aeba-148c-4e68-9e2d-c7ad92a84380

Let me know if you have any doubts.