如何在react-date-range中设置非availableDates的日期为禁用日期

要实现仅允许选择availableDates状态中的日期，你需要利用react-date-range的disabledDate属性（而非disabledDates数组），通过自定义判断函数来过滤不可选日期。具体步骤如下：

1. 优化可用日期查询效率 #

将availableDates数组转为Set结构，大幅提升日期存在性的查询速度：

const availableDatesSet = new Set(availableDates);

2. 编写日期禁用判断函数 #

创建一个函数，将当前日期转为与availableDates一致的字符串格式（如YYYY-MM-DD），然后判断该日期是否不在可用日期集合中：

const isDateDisabled = (date: Date) => {
  // 将Date对象转为'YYYY-MM-DD'格式的字符串，与接口返回的日期格式对齐
  const formattedDate = date.toISOString().split('T')[0];
  // 不在可用日期集合中的日期返回true（即禁用）
  return !availableDatesSet.has(formattedDate);
};

3. 配置DateRange组件 #

替换原有的disabledDates={[]}，改用disabledDate属性传入判断函数，同时添加加载状态避免初始全禁用的问题：

完整修改后的组件代码：

'use client';

import axios from 'axios';
import { useEffect, useState } from 'react';
import {
  DateRange,
  Range,
  RangeKeyDict
} from 'react-date-range';

import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

interface DatePickerProps {
  value: Range,
  onChange: (value: RangeKeyDict) => void;
}

const DatePicker: React.FC<DatePickerProps> = ({
  value,
  onChange,
}) => {

  const [availableDates, setAvailableDates] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchAvailableDates() {
      try {
        const response = await axios.get(
          "http://localhost:3000/api/booking"
        );
        setAvailableDates(response.data.availableDates);
      } catch (err) {
        console.error('加载可用日期失败:', err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchAvailableDates();
  }, []);

  const availableDatesSet = new Set(availableDates);

  const isDateDisabled = (date: Date) => {
    if (isLoading) {
      // 加载完成前允许选择，避免全禁用
      return false;
    }
    const formattedDate = date.toISOString().split('T')[0];
    return !availableDatesSet.has(formattedDate);
  };

  if (isLoading) {
    return <div>加载可用日期中...</div>;
  }

  return (
    <DateRange
      rangeColors={['#262626']}
      ranges={[value]}
      date={new Date()}
      onChange={onChange}
      direction="vertical"
      showDateDisplay={false}
      minDate={new Date()}
      disabledDate={isDateDisabled}
    />
  );
}

export default DatePicker

关键说明 #

• disabledDate是react-date-range提供的回调属性，接收当前日期作为参数，返回true则禁用该日期，比disabledDates数组更适合这种"反向过滤"的场景。
• 转换日期格式时，确保与接口返回的availableDates字符串格式完全一致（比如接口返回'2024-05-20'，就用toISOString().split('T')[0]来匹配）。
• 添加加载状态是为了避免在接口请求完成前，所有日期被误禁用的问题。

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