React项目中BlueprintJS DatePicker默认高亮指定日期的实现方案

新版本BlueprintJS确实移除了highlightedDates属性，现在需要通过modifiers属性来实现日期高亮，以下是具体解决方案：

步骤1：转换日期格式 #

Blueprint的日期判断依赖Date对象，先把你的字符串日期转成统一格式的集合（避免时区差异导致的比对错误）：

const dates = ['2023-05-10', '2023-05-13', '2023-05-15'];
// 转成ISO日期字符串的Set，方便快速比对
const targetDates = new Set(dates.map(dateStr => new Date(dateStr).toISOString().split('T')[0]));

步骤2：定义modifiers配置 #

modifiers是一个对象，每个键对应一个自定义修饰符，值是判断当前日期是否符合条件的函数：

const dateModifiers = {
  highlighted: (date) => {
    // 将当前日期转成和目标一致的字符串格式，比对是否在集合中
    const currentDateStr = date.toISOString().split('T')[0];
    return targetDates.has(currentDateStr);
  }
};

步骤3：配置DatePicker并设置高亮样式 #

方法一：内联样式（modifiersStyles） #

直接通过modifiersStyles属性定义高亮样式：

import { DatePicker } from "@blueprintjs/datetime";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";

function CustomDatePicker() {
  const dates = ['2023-05-10', '2023-05-13', '2023-05-15'];
  const targetDates = new Set(dates.map(dateStr => new Date(dateStr).toISOString().split('T')[0]));

  const dateModifiers = {
    highlighted: (date) => {
      const currentDateStr = date.toISOString().split('T')[0];
      return targetDates.has(currentDateStr);
    }
  };

  const modifierStyles = {
    highlighted: {
      backgroundColor: "#e8f4fd",
      color: "#1890ff",
      fontWeight: "bold",
      borderRadius: 4
    }
  };

  return (
    <DatePicker
      modifiers={dateModifiers}
      modifiersStyles={modifierStyles}
      // 其他组件属性，如placeholder等
    />
  );
}

方法二：自定义CSS类 #

Blueprint会自动给应用了highlighted修饰符的日期单元格添加bp4-calendar-date--highlighted类，你可以在全局CSS中设置样式：

.bp4-calendar-date--highlighted {
  background-color: #e8f4fd !important;
  color: #1890ff !important;
  font-weight: bold;
  border-radius: 4px;
}

此时JSX只需传入modifiers即可：

<DatePicker modifiers={dateModifiers} />

额外说明：如果需要「选中多个日期」 #

如果你的需求是真正的选中状态（而非仅视觉高亮），基础DatePicker只支持单个日期选中，此时应该使用MultiDatePicker组件，直接将日期数组转成Date对象传入value属性：

import { MultiDatePicker } from "@blueprintjs/datetime";

function MultiSelectDatePicker() {
  const selectedDates = ['2023-05-10', '2023-05-13', '2023-05-15'].map(str => new Date(str));
  return <MultiDatePicker value={selectedDates} />;
}

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