根據日期顯示不同的時間

Question

我試圖根據日期排除不同的時間，但無論我選擇什么日期，時間都被禁用。 例如，如果我選擇 9 月 28 日，則應禁用 12 點鍾。 如果我選擇 10 月 3 日，那么下午 1 點應該被禁用，但是 12 和 1 從一開始就被禁用並且無論我選擇什么日期都保持這種狀態。

https://hacker0x01.github.io/react-datepicker

  const isSunday = (date) => {
    const day = getDay(date);
    return day !== 0;
  };

  let excluded = [
    {
      time: "12",
      date: "28/09/2020",
    },
    {
      time: "13",
      date: "03/10/2020",
    },
  ];


    <DatePickerField
      filterDate={isSunday}
      minTime={new Date(new Date().setHours(8, 0, 0))}
      maxTime={new Date(new Date().setHours(17, 0, 0))}
      excludeTimes={excluded.map((exclude, index) => {
        return setHours(
          setMinutes(new Date(), 0),
          parseInt(exclude.time)
        );
      })}
      timeIntervals={60}
      maxDate={addDays(new Date(), 3)}
      dateFormat="d/M/Y HH:mm"
      timeFormat="HH:mm"
      name="time-to-contact"
      label="Required Date *"
    />

Answer 1

問題是你總是在excludeTimes道具中excluded 。 僅當所選日期為日期時才需要返回時間。 這樣的事情應該有效。 （也通過添加const [value, setValue] = useState(); ）。

<DatePickerField
  filterDate={isSunday}
  minTime={new Date(new Date().setHours(8, 0, 0))}
  maxTime={new Date(new Date().setHours(17, 0, 0))}
  excludeTimes={excluded.map((exclude) => {
    const excDate = new Date(exclude.date);
    if (
      value &&
      excDate.getDate() === value.getDate() &&
      excDate.getFullYear() === value.getFullYear() &&
      excDate.getMonth() === value.getMonth()
    ) {
      return new Date(new Date().setHours(exclude.time, 0, 0));
    }
    return null;
  })}
  timeIntervals={60}
  maxDate={addDays(new Date(), 3)}
  dateFormat="d/M/Y HH:mm"
  timeFormat="HH:mm"
  name="time-to-contact"
  label="Required Date *"
  onChange={(e) => {
    setValue(new Date(e));
  }}
  selected={value}
    />

此外，您的日期格式不適合 JS，它應該是：

  const excluded = [
    {
      time: "12",
      date: "09/28/2020"
    },
    {
      time: "13",
      date: "10/03/2020"
    }
  ];

這是一個工作示例的鏈接：https ://codesandbox.io/s/competent-smoke-4nv1e?file=/src/App.js

要為特定日期（假設是星期一）添加排除時間，您可以使用以下命令：

const excluded = [
  {
    time: "12",
    day: 1
  }, 
]

並將道具設置為：

excludeTimes={excluded.map((exclude) => {
  if (value && value.getDay() === exclude.day) {
    return new Date(new Date().setHours(exclude.time, 0, 0));
  }
  return null;
})}