Question

我试图根据日期排除不同的时间，但是无论我选择什么日期，时间都被禁用。例如，如果我选择9月28日，则应该禁用12点。如果我选择10月3日，则应该禁用1pm，但是从一开始就禁用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

问题是您总是在excluded道具中返回excludeTimes。仅当所选日期为日期时，才需要返回时间。这样的事情应该起作用。（也通过添加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;
})}

根据日期显示不同时间

1 个答案: