如何将react-date-range设置为仅查看模式？

需求明确：将react-date-range设置为纯查看模式，无输入框、禁止日历选择、无变更事件，用于区分可编辑和只读用户的场景。

你当前的实现已经满足基本需求，但可以通过组件原生属性和更合理的配置进一步优化，避免冗余代码和潜在的样式冲突：

优化后的实现方案 #

1. 组件配置层面（替代部分CSS和冗余属性） #

利用组件原生提供的属性，无需额外写CSS隐藏日期输入区域，同时彻底禁用选择功能：

<DateRange
  ranges={[state.selection1, state.selection2, state.selection3]}
  editableDateInputs={false}
  showDateDisplay={false} // 原生属性隐藏日期输入栏，无需自定义CSS
  showPreview={false}
  selectableDates={() => false} // 全局禁用日期选择，彻底阻止选择操作
  rangeColors={["#FFB800", "#B8FF00", "#B800FF"]}
  // 不传递onChange属性，自然不会触发任何变更事件
/>

2. 可选CSS增强（强化只读视觉和交互体验） #

如果需要彻底消除所有可交互的视觉提示，可添加以下CSS：

/* 阻止日历区域的所有鼠标交互 */
.rdrCalendarWrapper {
  pointer-events: none;
}

/* 移除日期单元格的 hover 效果，明确只读状态 */
.rdrDay:not(.rdrDayPassive):hover {
  background-color: transparent;
  cursor: default;
}

优化点说明 #

• 用组件原生的showDateDisplay={false}替代自定义CSS隐藏.rdrDateDisplayWrapper，减少样式耦合，避免因组件版本更新导致的样式类名变更问题
• 通过selectableDates={() => false}彻底禁用日期选择，比空onChange更可靠——空onChange只是不响应选择结果，但组件内部仍会产生选择状态变化；而selectableDates返回false会直接阻止选择行为
• 不传递onChange属性，符合组件设计逻辑，避免不必要的事件绑定
• 可选的CSS进一步强化只读的视觉反馈，让用户明确知道该日历不可操作

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