Vuetify v-date-picker在首次使用Month时抛出错误

Question

我正在创建一个工具，用户可以通过使用v-date-picker设置日期范围来更改图上显示的数据分组(按天、周或月显示(。

按月份查看时，日期选择器应默认为月份选择，否则为日期。

问题-如果在打开日期格式之前以月份格式打开v-date-picker，则返回到日/周视图后，控制台中将显示错误(RangeError:无效时间值(。如果您先打开"天"或"周"组件，则不会发生这种情况。

我创建了一个小片段，在代码笔上复制了这个问题，链接如下。

<div id="app">
<v-app id="inspire">
<v-row>
<v-menu ref="menu" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto">
<template #activator="{ on, attrs }">
<v-text-field v-model="dateRange" label="Date Range" prepend-icon="mdi-calendar" readonly v-bind="attrs" v-on="on" />
</template>
<v-date-picker v-model="dateRange" :show-current="false" :type="volumeType" no-title scrollable range />
</v-menu>
</v-row>
<v-row>
<v-btn @click="changeVolumeType('date')">
Date
</v-btn>
<v-btn @click="changeVolumeType('month')">
Month
</v-btn>
</v-row>
</v-app>
</div>

和JS

new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
dateRange: ["2022-10-10", "2022-10-23"],
volumeType: "date"
};
},
methods: {
changeVolumeType(newType) {
this.volumeType = newType;
}
}
});

https://codepen.io/FN_Antonie/pen/yLjrZoo-代码笔，您可以在其中复制问题-尽管您需要打开控制台才能看到它。请尝试先单击月份按钮，打开日期选择器，然后单击日期按钮。控制台错误应出现。除此之外，任何其他订单似乎都可以。

我已经尝试过跟踪2个不同的变量和2个不同v-date-picker组件，但问题仍然存在。我认为月份选择器设置了一个日期选择器无法读取的默认值，尽管我曾尝试在不同的地方设置明确的日期，但都无济于事。

如有任何帮助，我们将不胜感激。

Answer 1

我猜v-date-picker很可能不是为了具有动态类型，在这种特殊情况下会崩溃。您可以通过添加:key="volumeType"道具来绕过它，以便在更改类型时完全重新发送日期选择器。这也会产生总是将dateRange值重置为默认值的副作用，但您可以始终向changeVolumeType方法添加代码，以根据日期或月份手动正确格式化dateRange。

<v-date-picker
v-model="dateRange"
:show-current="false"
:type="volumeType"
:key="volumeType"
no-title
scrollable
range
/>