How to show last month and this month on popover (Ranged)

[mjemerson]

Hi,

A quick question hopefully that can be answered easily - when the Range picker is employed, by default if it's set to show 2 months it's the current month and then next month. However for my needs, all future dates are disabled so it makes no sense to show next month on the right hand side since they're all disabled. So my question is, is there a way to offset it so that the two months showing are last month THEN this month side by side? I found something called offset but it doesn't seem to be settable from either the DatePicker props or the configs?

[aboveyunhai]

I don't think it's possible to do it with the current version, but if you would like to copy&paste the source code (I always encourage that since the lib is relatively tiny) into your own folder,
then

chakra-dayzed-datepicker/src/range.tsx

Line 115 in 14b8bfd

const [dateInView, setDateInView] = useState(selectedDates[0] || new Date());

and

chakra-dayzed-datepicker/src/range.tsx

Line 126 in 14b8bfd

setDateInView(selectedDates[0] || new Date());

is what you are looking for,
basically new Date() - 1 month is what you want
Or you can export the Range calendar and build your own popover, just directly copy&paste the range file only and still use this package as dependency.

[mjemerson]

Thank you, I'll give it a try!

[mjemerson]

Hi again,

I'm having many issues trying to reference the datepicker from my local components folder, so in the end decided to give it up. Is there no way to call setDateInView from my source files by passing it to the date picker component somewhere? Or set a specific prop to a value?

[aboveyunhai]

@mjemerson currently no, I think you can just copy paste the range.tsx source file and change the const import to this package, it's bit of redundant, but it should be fine and you can change however you want.