如何通过 vue-datepicker 使用多个日历

Question

我正在使用 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="add a range of dates"
  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>

问题是我希望今天的日期始终位于右侧，上个月位于左侧，以避免图像中出现右侧日历被禁用的情况。我该怎么办？

也就是说，比如5月份，应该在左边，6月份应该在右边。

Answer 1

Vue3Datepicker 总是将当前月份设置在左侧。 我在一次显示三个月时遇到了类似的问题，我希望当前月份位于中间，而（默认情况下）它始终显示在左侧。

我通过实现了当月的中间：

1. 添加所需道具
   

<VueDatePicker id="inventory-date" v-model="inventoryForm.date" 
:enable-time-picker="false" 
:multi-calendars="{ count: 3 }"
:start-date="startDate" focus-start-date>
</VueDatePicker>

关键是这部分

:start-date="startDate" focus-start-date

2. 返回想要的

startDate

值

export default {
    name: "Foo",
    components: {
        VueDatePicker
    },
    setup() {
        const today = new Date();
        const prevMonth = new Date();
        prevMonth.setMonth(today.getMonth() - 1);

        return {
            startDate: prevMonth
        }
    }
}

就您而言，我建议不要制作两个单独的日历，而是制作一个显示两个月份并移动开始日期的日历。

    <Datepicker
      class="flex-1"
      format="dd/MM/yyyy"
      v-model="rangeDate"
      :enable-time-picker="false"
      range
      auto-apply
      :partial-range="true"
      placeholder="add a range of dates"
      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
      :multi-calendars="{ count: 2 }"
      :start-date="startDate"
      hide-offset-dates
    >
    </Datepicker>

我已经删除了

multi-calendars
multi-calendars-solo

我添加了

  :multi-calendars="{ count: 2 }"
  :start-date="startDate"
  hide-offset-dates

文件：
https://vue3datepicker.com/props/modes/#multi-calendars
https://vue3datepicker.com/props/calendar-configuration/#start-date
https://vue3datepicker.com/props/calendar-configuration/#hide-offset-dates