vue-datepicker多日历模式下首个日历箭头导航失效问题

问题描述 #

同时启用multi-calendars和arrow-navigation属性后，Vue DatePicker的键盘箭头导航功能异常：第二个日历可正常通过方向键（←→↑↓）切换日期，但首个日历完全无法响应箭头键操作。

复现步骤 #

• 实现同时开启multi-calendars和arrow-navigation的日期选择器（代码示例如下）
• 打开日期选择器面板
• 尝试在首个日历上使用方向键导航，无任何响应
• 点击切换到第二个日历，箭头导航功能恢复正常

代码示例 #

<VueDatePicker 
  :placeholder="getPlaceHolder" 
  :month-change-on-arrows="true" 
  :locale="locale"
  :alt-position="customPosition" 
  :aria-labels="ariaLabels" 
  :day-names="getWeekDaysList" 
  week-start="0"
  :month-change-on-scroll="false" 
  :min-date="getMinDate" 
  :max-date="getMaxDate" 
  :enable-time-picker="false"
  :model-config="{ type: 'string', format: 'YYYY-MM-DD' }" 
  :format="() => ''" 
  ref="datepickerRef"
  v-model="dateRange" 
  @range-start="onRangeStart" 
  @range-end="onRangeEnd" 
  @open="openCalendar"
  hide-offset-dates 
  prevent-min-max-navigation 
  range 
  arrow-navigation 
  multi-calendars
/>

解决方案 #

1. 日历打开时手动给首个日历单元格设焦点 #

利用组件的@open事件，在面板渲染完成后主动为首个日历的可交互日期单元格设置焦点，确保键盘事件绑定到正确元素：

methods: {
  openCalendar() {
    setTimeout(() => {
      // 选择首个日历中第一个未禁用的日期单元格，可根据实际DOM结构调整选择器
      const firstActiveCell = document.querySelector('.vdp-calendar:first-child .vdp-day:not(.vdp-disabled)');
      if (firstActiveCell) {
        firstActiveCell.focus();
      }
    }, 100);
  }
}

2. 升级组件到最新稳定版 #

该问题大概率是组件的已知bug，查看所使用的Vue DatePicker（如@vuepic/vue-datepicker）的更新日志，确认是否有修复该问题的版本，直接升级到最新版即可解决。

3. 自定义箭头导航逻辑（临时方案） #

如果上述方法无效，可手动监听键盘事件，自行处理首个日历的导航逻辑：

mounted() {
  document.addEventListener('keydown', this.handleArrowNavigation);
},
beforeDestroy() {
  document.removeEventListener('keydown', this.handleArrowNavigation);
},
methods: {
  handleArrowNavigation(e) {
    const activeCalendar = document.querySelector('.vdp-calendar.active');
    // 仅当焦点不在第二个日历且触发方向键时，执行自定义导航
    if (!activeCalendar || activeCalendar === document.querySelector('.vdp-calendar:first-child')) {
      let dayOffset = 0;
      switch(e.key) {
        case 'ArrowLeft':
          dayOffset = -1;
          break;
        case 'ArrowRight':
          dayOffset = 1;
          break;
        case 'ArrowUp':
          dayOffset = -7;
          break;
        case 'ArrowDown':
          dayOffset = 7;
          break;
        default:
          return;
      }
      e.preventDefault();
      this.updateSelectedDate(dayOffset);
    }
  },
  updateSelectedDate(offset) {
    // 根据当前选中的起始日期计算新日期，需适配你的dateRange格式
    const startDate = new Date(this.dateRange[0] || new Date());
    startDate.setDate(startDate.getDate() + offset);
    this.dateRange = [startDate.toISOString().split('T')[0], this.dateRange[1]];
  }
}

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