Dynamic mode changes

[Partiya]

can we just have better typescript type definition so we can dynamicly change between 2 modes using a single states

something like this in react for example
const [mode,setMode] = usestate<Mode>('single') // or 'range' ...

in my case i had to create 2 diffrent date components just to be able to get rid of typescript errors to switch between 2 modes dynamicly

[gpbl]

@Partiya I see what you mean — I've been wrestling with these prop types for a while, and this is the best I could come up with.
The goal would be to rewrite the DayPickerProps to support these kinds of cases.
Do you have an idea how to approach it?

[Partiya]

i guess the issue comes from the selected and the onSelectHandler which is responsible to change the selected dates because you are assigning diffrent types of selected dates for each mode and i guess we can come up with a diffrent data type like an array of dates

[ Date , Date ] ==> for range
[ Date ] ===> for single
[ Date , Date , Date , .... ] ===> for multiple selection

insted of using diffrent data types for each mode we can have list of dates like this .

let me know your thoughts about this

[gpbl]

Are you suggesting we always return an array of dates, regardless of the selection mode? It's an interesting option.

I think however we should carefully weigh the trade-offs. This would be a breaking change and could cause issues in many existing implementations.

In my case, I had to create two separate date components just to avoid TypeScript errors when switching modes dynamically.

Is that really a problem, though? Could better documentation have helped in this case?

[Partiya]

The problem that led me to start this discussion was the need to allow users to switch between single date selection mode and range selection mode based on certain conditions. I had heavily customized both my range and single date picker components—especially the day button styles.

However, when switching between the two modes by rendering different components, some of these customizations—like the day button styles—were being reset to their default styles.

Additionally, when I tried to pass the from value of the range picker as the initial selected date to the single date picker, it wasn’t being set properly. On top of that, when clicking on a date in the single date picker, the first click wouldn’t trigger any selection. Only after clicking a second time on another day would a date actually be selected

[gpbl]

@Partiya I think your best option here is to render two different DayPickers, one for range one for a single selection. Does this solution work for you?