如何將動態日期時間選擇器添加到我的應用程序？

Question

我正在嘗試創建一個支持在線預訂/預訂系統的 web 應用程序。 我想創建一個動態日期選擇器，允許用戶根據可用性選擇一些特定日期。

假設可用日期的數據存儲在數組slots中。 如何修改日期選擇器以僅允許用戶從這些日期集中進行選擇，同時禁用 rest。

我使用來自@material-ui/pickers pickers 的 DatePicker，我能夠找到disablePast禁用所有以前的日期但找不到任何適合我的用例的道具。

有人可以幫我嗎？

Answer 1

您可以為此做的是，您可以使用shouldDisableDate道具，您必須在其中傳遞接受date作為參數的 function 並返回 boolean true/false ，無論是否應呈現日期。

例如：

在組件的shouldDisableDate道具中，您可以像這樣傳遞 function

<DatePicker  
  shouldDisableDate={renderDateFunction}
  ...

然后將 function 定義為

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;
  };

您可以從此處的文檔中閱讀有關 DatePicker 組件 API 的更多信息： https://material-ui-pickers.dev/api/DatePicker