Vuepic/vue-datepicker多日历配置：如何让当月始终显示在右侧

我正在使用Vue3的Composition API及Vuepic/vue-datepicker库，遇到了一个显示问题：

我的日期选择器代码如下：

<Datepicker
  multi-calendars
  multi-calendars-solo
  class="flex-1"
  format="dd/MM/yyyy"
  v-model="rangeDate"
  :enable-time-picker="false"
  range
  auto-apply
  :partial-range="true"
  placeholder="选择日期范围"
  text-input
  :preset-ranges="presetRanges"
  @update:model-value="getOverviewhse()"
  :min-date="new Date(new Date().setFullYear(new Date().getFullYear() - 5))"
  :max-date="new Date()"
  prevent-min-max-navigation
>
  <template #yearly="{ label, range, presetDateRange }">
    <span @click="presetDateRange(range)">{{ label }}</span>
  </template>
</Datepicker>

我希望今日所在的月份始终显示在右侧日历，上月显示在左侧，避免出现右侧日历因max-date限制被禁用的情况（如图所示）。比如当前是6月，要让左侧显示5月、右侧显示6月，该怎么实现？

核心思路是通过控制日期选择器的visible-month属性，强制指定起始显示月份为上月，这样开启多日历后，右侧自然会显示当前月份。

1. 声明响应式变量控制起始月份
   在组件脚本里，用Composition API定义一个响应式变量，直接把起始月份设为上月第一天：

import { ref } from 'vue';

const currentDate = new Date();
// 起始月份设为上月第一天
const targetVisibleMonth = ref(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));

2. 绑定到Datepicker组件
   给Datepicker添加:visible-month属性，绑定刚才定义的变量：

<Datepicker
  <!-- 保留你原来的所有属性 -->
  :visible-month="targetVisibleMonth"
>
  <!-- 原有模板内容不变 -->
</Datepicker>

3. 可选：锁定月份切换（防止用户手动改走）
   如果担心用户手动切换月份导致布局打乱，可以监听update:visible-month事件，强制把起始月份拉回上月：

<Datepicker
  <!-- 其他属性 -->
  :visible-month="targetVisibleMonth"
  @update:visible-month="lockVisibleMonth"
>
</Datepicker>

对应的脚本逻辑：

const lockVisibleMonth = (newMonth) => {
  const currentMonth = new Date().getMonth();
  // 如果用户切到了非上月的起始月份，强制重置
  if (newMonth.getMonth() !== currentMonth - 1) {
    targetVisibleMonth.value = new Date(new Date().getFullYear(), currentMonth - 1, 1);
  }
};

原理很简单：visible-month指定了多日历面板的起始显示月份，开启multi-calendars后，组件会从这个月份开始依次往后显示。把起始月设为上月，左侧就是上月，右侧自动显示当前月，完美避开右侧日历因max-date被禁用的问题。

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