如何在React Datepicker中禁用特定日期？特定用户选择场景下能否实现？

基础禁用方法 #

React Datepicker核心通过filterDate属性控制日期可选性，该属性接收一个函数：函数参数为当前待判断的日期，返回true则日期可选，返回false则禁用该日期。

示例1：禁用指定日期数组 #

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useState } from "react";

function App() {
  const [startDate, setStartDate] = useState(new Date());
  // 定义需要禁用的日期数组
  const disabledDates = [
    new Date("2024-05-10"),
    new Date("2024-05-15"),
    new Date("2024-05-20")
  ];

  const filterDate = (date) => {
    // 判断当前日期是否在禁用数组中
    return !disabledDates.some(disabledDate => 
      date.toDateString() === disabledDate.toDateString()
    );
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      filterDate={filterDate}
    />
  );
}

export default App;

示例2：禁用周末 #

const filterDate = (date) => {
  const day = date.getDay();
  // 0是周日，6是周六，返回true表示非周末可选
  return day !== 0 && day !== 6;
};

特定用户场景下的动态禁用 #

完全可以根据特定用户的信息动态调整禁用规则，核心是根据当前用户的身份、权限或配置，动态生成禁用日期列表或调整filterDate的判断逻辑。

示例：根据用户ID加载不同禁用日期 #

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useState, useEffect } from "react";

function UserDatePicker({ userId }) {
  const [startDate, setStartDate] = useState(new Date());
  const [userDisabledDates, setUserDisabledDates] = useState([]);

  // 根据用户ID获取对应的禁用日期（模拟接口请求）
  useEffect(() => {
    const fetchDisabledDates = async () => {
      // 实际场景替换为真实API请求
      const response = await fetch(`/api/user/${userId}/disabled-dates`);
      const data = await response.json();
      // 将接口返回的日期字符串转为Date对象
      const dates = data.map(dateStr => new Date(dateStr));
      setUserDisabledDates(dates);
    };

    fetchDisabledDates();
  }, [userId]);

  const filterDate = (date) => {
    return !userDisabledDates.some(disabledDate => 
      date.toDateString() === disabledDate.toDateString()
    );
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      filterDate={filterDate}
    />
  );
}

export default UserDatePicker;

这个示例中，组件接收userId作为props，根据用户ID动态获取该用户对应的禁用日期列表，实现了针对特定用户的日期禁用逻辑。你也可以根据用户的其他属性（如会员等级、所在地区等）调整filterDate的判断规则，比如给会员用户开放更多可选日期，给普通用户禁用特定节假日等。

内容的提问来源于stack exchange，提问作者Ethan