如何保持react-modern-calendar-datepicker常开调试样式并实现单/范围日期选择

• 方案1：使用DevTools断点拦截关闭逻辑
  1. 点击输入框唤起日历
  2. 打开Chrome DevTools的「Sources」面板，找到Event Listener Breakpoints > Mouse > 勾选click选项
  3. 点击DevTools左上角的元素选择箭头，再点击页面上的日历区域，此时JS执行会被断点暂停，日历不会消失，即可切换回「Elements」面板查看DOM结构和样式
• 方案2：强制覆盖日历DOM的显示样式
  唤起日历之后，在控制台执行以下代码，强制日历固定显示在页面上：

  const calendarEl = document.querySelector('.responsive-calendar')
  calendarEl.style.cssText = `
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 999999 !important;
    top: 100px !important;
    left: 100px !important;
  `
  

• 方案3：移除失焦关闭的事件监听器
  在Elements面板找到日历父元素或者输入框元素，切换到「Event Listeners」标签，移除blur、click outside相关的事件监听器，即可避免点击其他区域时日历关闭。

你使用的日期选择组件原生支持控制选择后是否关闭，以及自定义选择逻辑，按以下步骤修改即可：

1. 新增状态记录首次选择的日期

const [firstSelected, setFirstSelected] = useState(null)

2. 替换默认的onChange处理函数

const handleDateChange = (newVal) => {
  // 无首次选择时，点击直接选中单日
  if (!firstSelected) {
    const singleDay = { from: newVal.from, to: newVal.from }
    setSelectedDayRange(singleDay)
    setFirstSelected(newVal.from)
    return
  }
  // 第二次选择和首次是同一天，保持单日选中
  if (
    newVal.from.year === firstSelected.year &&
    newVal.from.month === firstSelected.month &&
    newVal.from.day === firstSelected.day
  ) {
    setSelectedDayRange({ from: newVal.from, to: newVal.from })
    setFirstSelected(null)
    return
  }
  // 第二次选择不同天，触发范围选择
  setSelectedDayRange({
    from: firstSelected,
    to: newVal.from
  })
  setFirstSelected(null)
}

3. 给DatePicker新增控制显隐的prop，避免选完自动关闭

<DatePicker
  value={selectedDayRange}
  onChange={handleDateChange}
  inputPlaceholder="Select a date"
  inputClassName="my-custom-input"
  shouldHighlightWeekends
  colorPrimary="rgba(4, 173, 147, 255)"
  calendarClassName="custom-calendar responsive-calendar"
  calendarTodayClassName="custom-today-day"
  locale={myCustomLocale}
  data-testid="datepicker-input"
  // 新增以下配置
  shouldCloseOnSelect={false}
/>

4. 样式调试可直接通过你传入的自定义类名custom-calendar、custom-today-day覆盖组件默认样式即可。

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