Vuetify 日期选择器答案

【问题标题】：Vuetify date-pickerVuetify 日期选择器
【发布时间】：2021-09-24 09:05:03
【问题描述】：

我需要将它用作给定年份和月份的日期选择器，目前标题是可点击的，并且可以更改月份和年份。

如何禁用标头？

<v-date-picker 
        v-model="2021-07-15"
        no-title
        type="date"
        :show-current = "false"
>
</v-date-picker>

【问题讨论】：

您可能希望将min 和max 设置为适当的值，理论上这会禁用导航到其他月份和年份...

标签： javascript vue.js vuetify.js

【解决方案1】：

您可以使用“v-date-picker-header”类并将其设置为无。

.v-date-picker-header {
     display: none !important;
 }

【讨论】：

这肯定会在视觉上隐藏它，并且与设置最小值和最大值的建议结合使用可能会很好。

【解决方案2】：

正如 Heretic Monkey 所说，您可以使用具有适当值的 min 和 max。以下是你可以做到的：

对于v-datepicker：

<v-date-picker :min="min" :max="max" v-model="picker"></v-date-picker>

在你的脚本中：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    let date = new Date()
    return {
      min: (new Date(new Date(date.getFullYear(), date.getMonth(), 1) - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      max: (new Date(new Date(date.getFullYear(), date.getMonth() + 1, 0) - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      picker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
    }
  },
})

【讨论】：