ToolbarComponent is not working for DesktopDateRangePicker or MobileDateRangePicker

[aamirafridi]

I am trying to add some buttons in the toolbar but doesn't seem to be working

https://codesandbox.io/s/material-ui-date-range-qd0wz?file=/src/index.tsx

[aamirafridi]

toolbarTitle is also not working

[dmtrKovalenko]

toolbarTitle is also not working

Must be fixed by #1914

[aamirafridi]

@dmtrKovalenko Which version should have the above fix?

[dmtrKovalenko]

The next

[oliviertassinari]

toolbarTitle is also not working

@aamirafridi if you could test again once @material-ui/pickers@v4.0.0-alpha.9 is released, it will be perfect :).

[oliviertassinari]

Also, I see that #1914 is missing a test case. If we could resolve the issue with one, it will be perfect.

[aamirafridi]

Sure, Can someone ping me once it is released? I will give it ago

[oliviertassinari]

@aamirafridi You can subscribe to new releases with:

[aamirafridi]

Done, I will try after the next release

[aamirafridi]

oh no....
shouldDisableDate is not working :(

shouldDisableDate={() => false}

I can still select any date. https://codesandbox.io/s/material-ui-date-range-qd0wz?file=/src/index.tsx

[dmtrKovalenko]

I am seeing, that it is pretty common mistake. shouldDisableDate must return true in order to disable date.

Isn’t it clear @aamirafridi?

[aamirafridi]

it worked, sorry for the wrong alert

[aamirafridi]

renderDay also doesn't seems to be working https://codesandbox.io/s/material-ui-date-range-h3nlq?file=/src/index.tsx

[aamirafridi]

Same for autoOk
docs says default is false but calendar disappears after you select 2nd date
basically all props need to be checked

[aamirafridi]

shouldDisableYear is not working :(

[dmtrKovalenko]

This is already fixed in alpha.9

[aamirafridi]

ToolbarComponent is still not working https://codesandbox.io/s/material-ui-date-range-qd0wz?file=/src/index.tsx

[aamirafridi]

also, is autoOk is removed?

[aamirafridi]

I want the user to select a date, then I will highlight X-days onward from that date to show the user a range (user cannot select end date). I tried using default DatePicker but it doesn't allow showing multiple calendars :(
So I am using DateRange where with renderInput, I just render one Input and once From date is selected, I calculate To date and set it programmatically. I want to show the OK button to the user so the user can see the range and then click OK. I was ok with autoOk true which it will close itself on selecting the first date.

Update:
just found disableCloseOnSelect

I wish there was a way to display cancel and Ok button even for the desktop to have complete control

[aamirafridi]

disableCloseOnSelect is not acting to previous autOk

e.g.

onChange={(selectedDate) => {
          if (selectedDate[0]) {
            const endDate = addDays(selectedDate[0] as Date, Number(3));
            return props.onChange([selectedDate[0], endDate]);
          }
          props.onChange(selectedDate);
}}

setting end date programmatically use to close the date picker with autoOk. With disableCloseOnSelect={false} you have to click another date to make it close.

Also disableCloseOnSelect is confusing. Why not just closeOnSelect/shouldCloseOnSelect

[oliviertassinari]

Also disableCloseOnSelect is confusing. Why not just closeOnSelect/shouldCloseOnSelect

Yeah, the problem is that the default value doesn't match the name convention we have for the components I have open #2050 so we don't forget to set disableCloseOnSelect={true} in v5.