如何将动态日期时间选择器添加到我的应用程序？

Question

I'm trying to create a web app that supports online reservation/booking system. I want to create a dynamic date picker that allows the user to pick some specific dates, based on the availability.

Let's say the data for available dates is stored in an array slots . How can modify the date picker to only allow the user to choose from set of these dates, while disabling the rest.

I'm use DatePicker from @material-ui/pickers and I was able to find disablePast which disables all the previous dates but couldn't find any prop, that fits my use case.

Can someone help me out?

Answer 1

What you can do for your this is, you can use the shouldDisableDate prop in which you have to pass a function that accepts date as an argument and return a boolean true/false whether the date should be rendered or not.

For example:

In your component's shouldDisableDate prop you can pass a function like this

<DatePicker  
  shouldDisableDate={renderDateFunction}
  ...

and then define the function as

const renderDateFunction = (renderDate) => {
    
   // If the current date passed to this function is included in the slots
   // then enable selection of that date
   if(slots?.includes(renderDate)) return true;

   // else prevent the user from selecting that date
    return false;
  };

You can read more about the DatePicker Component API from the documentation here: https://material-ui-pickers.dev/api/DatePicker