Change month color when it's not selectable

[kilofafeure]

Hi, I'm trying to change the style when a month is out of the minDate maxDate range so that the user could knows it's not selectable. There's some way to do this?

Thanks in advance.

Good job!

[slavakisel]

@kilofafeure hi, I think we can add css classes selectable and non-selectable to allow further customization to users. I'll add it when I get a spare moment

[kilofafeure]

Thanks for answer so fast! But I've another qüestion. Would be possible for the years too? Or make the years not appear if not are in the minDate maxDate range?

Thanks a lot again and best regards.

[slavakisel]

@kilofafeure as I can see years out of selection range are not being shown in the latest version https://www.loom.com/share/a1173ef7d88b48e09a67b3d52c13f836

[kilofafeure]

Ok, I've done an npm install, I'll check if has downloaded the last version or I've done something wrong in code.

Thanks a lot again! Have a nice day.

[kilofafeure]

Hi, I've checked the range date with minData and maxDate and if I put a 2 years range the front is broken. I add a link with a picture of the result: https://ibb.co/TKX85MW (copy the link and past it on other tab, since github is not opened)

And this is my code:
<MonthPickerInput closeOnSelect={true} i18n={{ monthNames: MONTH_NAMES }} year={getCurrentYear()} month={getCurrentMonth()} lang={getCurrentLanguage()} minDate={[1, 2018]} maxDate={[6, 2020]} inputProps={{ id: 'monthSelector', name: 'monthSelector', }} onChange={function ( maskedValue: any, selectedYear: any, selectedMonth: any, ) { console.log(maskedValue, selectedYear, selectedMonth); }} />

Thanks.

[kilofafeure]

Hi again,

I've been working whith the picker and I've been able to see it properly with a range of 2 years, I add a picture link https://ibb.co/4NNhzPh. I don't know what I was doing wrong, I've been trying to reproduceit again to understand why but I haven't been able. So, the component is fine and I was doing something wrong.

Sorry for the inconveniences.

Best regards.

This is the working code:
<MonthPickerInput closeOnSelect={true} i18n={{ dateFormat: DATE_FORMAT, monthFormat: MonthFormat.SHORT, monthNames: MONTH_NAMES, }} year={selectedMonthTo[1]} month={selectedMonthTo[0]} lang={lang} minDate={minDate} maxDate={maxDate} inputProps={{ id: 'monthSelector', name: 'monthSelector', className: 'montPicker', }} onChange={function ( maskedValue: any, selectedYear: any, selectedMonth: any, ) { handleMonthPicker(MonthPickerRangeEnum.To, selectedYear, selectedMonth); }} />
where minDate && maxDate are now defined on the constructor