从日期起仅查询年份（YYYY）

Question

如何从Vuetify Datepicker中仅选择年份？

我有一个要求，我需要下拉菜单以仅选择年份YYYY。

但是默认的Vuetify日期选择器会选择整个YYYY-MM-DD格式。

Answer 1

我在日期选择器的源代码中看到year类型是已计划的，并将在将来实现。来自源代码道具：

 type: String,
  default: 'date',
  validator: type => ['date', 'month'].includes(type) // TODO: year
},

但是我可以通过解决方法no-title来实现，防止日期选择器切换到月/日窗口并关闭v-menu。您可以看到工作示例-Changed codepen from docs。

如果需要，还可以使用标题和标题的格式化来获得更好的效果。

Answer 2

vuetify属性具有“ 类型”

仅YYY-MM月份和年份

 <v-date-picker type="month">
 </v-date-picker>   

仅YYY年

 <v-date-picker type="year">
 </v-date-picker>   

完整日期

YYY-MM-DD（只需删除类型）

 <v-date-picker>
 </v-date-picker>   

这就是

Answer 3

使用type道具不支持。

但是一种解决方法是将this.$refs.picker.activePicker设置为键入YEAR。我们可以创建一个观察器来监视菜单属性，并在打开菜单时将activePicker更改为YEAR：

watch: {
    menu (val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
    }
}

接下来，我们需要在用户选择年份后立即关闭菜单。为此，我们在选择器上添加了@click:year事件：

<v-date-picker
    v-model="year"
    ref="picker"
    no-title
    scrollable
    @click:year="saveYear(year)"
>
    <v-spacer></v-spacer>
    <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
    <v-btn text color="primary" @click="saveYear(year)">OK</v-btn>
</v-date-picker>

saveYear方法：

saveYear(year) {
    this.$refs.menu.save(year)

    // Reset activePicker to type YEAR
    this.$refs.picker.activePicker = 'YEAR'

    // Close the menu/datepicker
    this.menu = false
}