Vuetify v-date-picker切换日历类型报错如何修复

错误复现步骤 #

• 将type切换为month
• 选择一个月份范围
• 将type切换为date

操作完成后即可触发报错：

相关代码 #

JS代码

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      modal : false ,
      currentLocale : 'en',
      selectOptions : [
        { key: 'date', value: 'Date' },
        { key: 'month', value: 'Month' }
      ],
      calType : 'date',
      range : true,
      date : []
    }
  },
  methods: {
    selectType($event) {
      this.calType = $event;
    },
  },
})

HTML代码

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
           <v-col cols="12">
          <v-select
            v-model="calType"
            label="select date type"
            item-text="value"
            item-value="key"
            :items="selectOptions"
            dense
            single-line
            v-on:change="selectType($event)"
          >
          </v-select>
        </v-col>
        <v-col cols="12">
          <v-dialog
            ref="dialog"
            v-model="modal"
            :return-value.sync="date"
            persistent
            width="290px"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model="date"
                label="Picker in dialog"
                prepend-icon="mdi-calendar"
                readonly
                v-bind="attrs"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="date"
              :locale="currentLocale"
              :range="range"
              :type="calType"
              :first-day-of-week="1"
              scrollable
            >
              <v-spacer></v-spacer>
              <v-btn text color="primary" @click="modal = false">
                Cancel
              </v-btn>
              <v-btn text color="primary" @click="$refs.dialog.save(date)">
                OK
              </v-btn>
            </v-date-picker>
          </v-dialog>
        </v-col>
    </v-row>
  </v-app>
</div>

报错截图 #

修复方案 #

报错是因为月份范围选择后，date数组存储的是YYYY-MM格式的字符串，切换为date类型时，v-date-picker无法解析该格式的日期值，导致异常。

最简单的修复方式是切换类型时清空原有日期值，修改selectType方法即可：

selectType($event) {
  this.calType = $event;
  this.date = [];
}

如果需要保留原有时间范围，可在切换时做格式转换，将YYYY-MM格式的月份值转换为对应月份的首日/末日YYYY-MM-DD格式，再赋值给date即可。

内容的提问来源于stack exchange，提问作者morteza mortezaie