javascript 如何禁用React日期选择器中的特定日期?

58wvjzkj  于 2023-02-02  发布在  Java
关注(0)|答案(3)|浏览(182)

在react Datepicker中选择特定用户时,是否可以禁用特定日期

f8rj6qna

f8rj6qna1#

你可以使用excludeDates来完成这个任务,它是一个Date对象的数组:

<DatePicker
    selected={startDate}
    onChange={(date) => setStartDate(date)}
    excludeDates={[new Date(), subDays(new Date(), 1)]}
    placeholderText="Select a date other than today or yesterday"
/>
vwkv1x7d

vwkv1x7d2#

  • 改进马赫什·萨穆德拉的回答 *
    选择特定用户时

我从这句话中了解到,您希望为某些用户禁用特定日期,例如基于角色的访问
假设您这样保存用户数据

user = {
  name: 'ABC',
  email: 'abc@abc.com',
  role: 'Admin' //Admin, User, etc..
};

然后,您可以像这样控制excludeDates属性

excludeDates={user.role !== 'Admin' ? [new Date(), subDays(new Date(), 1)] : []}

UPDATE您可以像这样从端点获取用户数据

useEffect(() => {
  apiEndpoint
    .then(result => setUser(result.data))
    .catch(error => console.log(error))
}, [])
zvms9eto

zvms9eto3#

我遇到了同样的问题,发现最简单的解决方案是使用excludeDates并将addDays(new Date(), 5)〈-- 5(您希望排除的日期)添加到数组中,然后删除selectsRange

...
  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      excludeDates={[addDays(new Date(), 1), addDays(new Date(), 5), addDays(new Date(), 7), addDays(new Date(), 12) ]}
      //selectsRange
      selectsDisabledDaysInRange
      inline
    />
  );
};

相关问题