根据一天显示不同的时间

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

问题是你总是返回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;

})}