ReactJS Ant Design - Use Range Picker as Multi Month View with Single date selection

Question

I have a requirement of implementing Multiple Month View which shows two months calendar side by side exactly like RangePicker but to be able to choose only single date, not a range.

I have made a Sandbox

If anyone has worked on such solution, please help.

Thanks.

Answer 1

I worked on something similar recently. I made an override to the Ant CMS for the range selection blue background. I just kept the styling for the dates that are clicked, and I just kept the two selected dates instead of the entire range.

It's a hack, but it worked fine and I've yet to run into any issues with it.

Answer 2

Set allowEmpty={[false, true]} disabled={[false, true]}

Demo