如何禁用 MUI 日期選擇器中的日期列表

Question

我想禁用 MUI 日期選擇器未來日期（僅選定日期而不是所有未來日期）
我從 API 獲取日期數組，需要從日期選擇器中將其禁用。

假設下面的blackoutDates是我從 API 得到的。那么如何禁用這些日期呢？

下面是我的代碼

const getDisabledDates = () => {
 let blackoutDates = {[
    "2022-03-01",
    "2022-03-08"
    "2022-04-13",
    "2022-05-22"
 ]}
}

<DatePicker
  disablePast
  value={checkout.rideDate}
  shouldDisableDate={getDisabledDates}
  onChange={(newValue) => {
   dispatch(setRideDate(newValue?.toISOString().split('T')[0]))
   }}
  renderInput={(params) => <TextField  className={classes.datePickerStyle} {...params}/>}
/>

Answer 1

shouldDisableDate是一個 function，當前日期在參數中。 所以你需要將它與你的數組進行比較，以啟用/禁用日期

const shouldDisableDate= date => {
  let blackoutDates = {[
    "2022-03-01",
    "2022-03-08"
    "2022-04-13",
    "2022-05-22"
  ]}

  return blackoutDates.includes(date);
}

這是一個例子，因為您的date是Date類型，而您的數組包含字符串。 因此，您需要先使用您喜歡的方式將date轉換為YYYY-MM-DD字符串:)

Answer 2

處理程序 prop shouldDisableDate將日期參數傳遞給您提供的 function。 因此，您的 function 可能如下所示：

const getDisabledDates = (date) => {
 let blackoutDates = [
    "2022-03-01",
    "2022-03-08"
    "2022-04-13",
    "2022-05-22"
 ];
 // check `date` object against blackoutDates.
 // return true | false 
}

請記住，日期參數是普通日期 object。更多信息請參閱MUI 文檔。 在示例中，您可以看到 function isWeekend是如何傳遞給道具shouldDisableDate的。 根據date- fns 文檔，這個 function 接受日期 object。我建議你在 MUI 提供的演示中試一試。