Search code examples
javascriptreactjsmaterial-uireact-datepicker

dynamic datePicker in material ui Reactjs

I have a problem, I can not make actual dates in the datepicker. I have an array of date strings in a state. I only need to put these dates in the datepicker so that only these dates are available for clicking, how can I do this please?

Array of dates:

Data

An example of how I want to do:

Example of Calendar

I have a default datePicker from MUI https://codesandbox.io/s/v0xqj0?file=/demo.js

Here is how it looks

I tried to use google, tried through renderday, but so far it did not work. The maximum that happened is, it's funny))

My result

Solution

  • You can use the props "shouldDisableDate" to disable certain dates and pass a function that will return true if the value is not in your array of dates.

    You have an example in the documentation here: https://mui.com/x/react-date-pickers/date-picker/

    I forked your codesandbox here is what you could do: https://codesandbox.io/s/hardcore-yonath-kvk59t?file=/demo.js:917-921