从日期开始 Vuetify 仅选择年份 (YYYY)答案

【问题标题】：Vuetify Pick Only Year (YYYY) from date从日期开始 Vuetify 仅选择年份 (YYYY)
【发布时间】：2018-07-19 16:43:19
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

year 下拉菜单正是我想要的。但是当我选择年份时，它也默认选择01-19。

【解决方案2】：

不支持使用 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
}

【讨论】：

这看起来很有希望，但这段代码为“年份”返回 null。如果可能的话，我很想解决这个问题。
activePicker 是来自v-date-picker 的属性。直接突变会发出警告。更改internalActivePicker 可能是一个更好的主意

【解决方案3】：

添加属性：active-picker.sync="'YEAR'"

<v-date-picker
        :active-picker.sync="'YEAR'"
      ></v-date-picker>

【讨论】：

不工作，崩溃

【解决方案4】：

vuetify 属性有“type”

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>

方法2：在新的vuetify中

更新 (:active-picker.sync="'YEAR'" )

<v-date-picker
        :active-picker.sync="'YEAR'"
      ></v-date-picker>

就是这样

【讨论】：

不幸的是添加 type="year" 崩溃。不支持。
我的应用程序中仍然使用上述格式，您可以尝试官方文档链接vuetifyjs.com/en/components/date-pickers/#birthday-picker

【解决方案5】：

我的解决方案：

 <v-date-picker
    v-model="year"
    ref="picker"
    no-title
    scrollable
    @input="saveYear(year)"
>
</v-date-picker>

saveYear 方法：

saveYear(year) {
  this.$refs.picker.internalActivePicker = 'YEAR'
}

年表：

year (val) {
   if (val){
      this.$refs.picker.internalActivePicker = 'YEAR'
   }
}

【讨论】：