如何使用vue-datepicker的多个日历

r8xiu3jd  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(145)

我正在使用组合API Vuepic/vue-datepicker library,我遇到了以下问题。我创建了一个日期选择器,遇到了以下问题:

<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>

字符串
问题是,我希望今天的日期总是在右边,上个月在左边,以避免在图像中出现右日历被禁用的情况。如何才能做到这一点?


的数据
换句话说,例如,在五月,它应该在左边,六月应该在右边。

xoefb8l8

xoefb8l81#

Vue3Datepicker总是在左边设置当前月份。我有类似的问题,一次显示三个月,我想让当前月份在中间,当(默认情况下)它总是显示在左边。

我在年中实现了当月:

1.添加所需 prop

<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

相关问题