Material-ui-pickers: Need to let available just some dates

[alexedtionweb]

Hi,
firstly thank you guys for this amazing lib. I love it.
So basically my problem is I need to enable just specific days in the picker the reason for that is to use my backend as a source of which day should be displayed.
I created palliative way to do this using the shouldDisableDate method but I think is terrible for performance.
the example as follow:
https://codesandbox.io/s/stupefied-pasteur-gzpvw?fontsize=14&hidenavigation=1&theme=dark

Can you guys consider to create a method like "shouldEnableDate" or point out another alternative for that?
Warm regards.

[dmtrKovalenko]

Hmmmmmmmm. It should not be terrible for performance is you will manually set selected date to enabled.

[alexedtionweb]

That's the point I am able to select which date should be disable but I don't know how to send to the datapicker which date should be enabled only. I'm trying to understand how datapicker receive dates objects and display it. That's the think is not clear for me. If you can provide an example explaining how that would be really helpful.

[oliviertassinari]

In https://github.com/mui-org/material-ui-pickers/issues/1293#issuecomment-538374383, I was proposing a disabledDate function callback prop.
In the current version, you can use shouldDisableDate.

I think that we should close the issue as a support request.

[bretep]

@alexedtionweb here is a more efficient way:

import React, {useState} from 'react';
import {DatePicker} from '@material-ui/pickers'
import {format} from 'date-fns'

const MyDateComponent = (props) => {

    const [date, changeDate] = useState(new Date());

    const dates = [
        "2020-01-16",
        "2020-01-02",
        "2020-01-03",
        "2020-01-04",
        "2020-01-12",
        "2020-01-08",
        "2020-02-13"
    ]

    const disableDay = (date) => {
        const pickerDate = format(date, 'yyyy-MM-dd')
        return !dates.some((date) => date === pickerDate)
    }

    return (
        <DatePicker
            autoOk
            orientation="landscape"
            variant="static"
            openTo="date"
            value={date}
            onChange={changeDate}
            shouldDisableDate={disableDay}
        />
    )
}