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

r8xiu3jd 于 7个月前发布在 Vue.js

关注(0)|答案(1)|浏览(67)

我正在使用组合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>

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

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

vue.js

来源：https://stackoverflow.com/questions/76483255/how-to-use-multiple-calendars-with-vue-datepicker

1条答案

按热度按时间

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

赞(0）回复(0）举报 7个月前

我来回答

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

1条答案

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

相关问题

热门标签

最新问答