vue.js - 手动输入日期和/或使用日历 vuetify

Question

我对 Vuetify 还很陌生。 我想了解是否可以使用 v-text-field 手动和/或使用日历(v-date-picker)插入日期。

我有一个带有内置 v-date-picker 的 v-text-field。如果我在日历中插入日期，显然一切都很好。当我输入数字时，它会给我错误“无效的时间值”(首先打开日历后，我注意到，直到我打开日历为止，此错误不会出现)。

我的问题是，我是否必须手动处理此错误，或者是否有一些更实用的方法可以修复(也许需要一些 Prop )？ 或者至少您可以给我一些有关 v-date-picker 如何工作的建议，以便能够对其进行修改以对我有利。

编辑: 最后，对于 v-date-picker 进行的检查，无法在文本字段上手动写入，因为检查会在输入的第一个数字时立即开始。

由于支持 picker_date 变量，此设置可以在代码中的其他地方使用。这样就会有 n 个文本字段变量和 1 个 v-date-picker 用于修改主要变量(在其他方面，只需修改相关文本字段的变量就足够了) )。

我想插入解决方案:这样我既可以手写又可以用日历书写。

                 <v-menu
                    v-model="menu_revoke_date1"
                    :close-on-content-click="false"
                    transition="scale-transition"
                    max-width="290px"
                    min-width="290px"
                  >
                    <template v-slot:activator="{ on }">
                      <v-text-field
                        color="secondary"
                        label="Data revoca"
                        hint="YYYY-MM-DD"
                        persistent-hint
                        v-model="revocated_at"
                        :error-messages="errors.revocated_at"
                        prepend-icon="mdi-calendar"
                        clearable
                        outlined
                        @blur="picker_date = parseDate(revocated_at)"
                        v-on="on"
                      ></v-text-field>
                    </template>
                    <v-date-picker first-day-of-week="1" v-model="picker_date"                           @change="revocated_at = picker_date" no-title                                 @input="menu_revoke_date1= false">
                    </v-date-picker>
                 </v-menu>

    parseDate(date){
      let validate_date = this.$moment(date)
      if (this.$moment(validate_date,'YYYY-MM-DD',true).isValid()) {
        return validate_date.format('YYYY-MM-DD')
      }
    },

Answer 1

一种选择是使用第二个值来仅保存有效日期。在这里，当用户输入有效日期时，我们分配有效日期持有者，当日历更改时，我们分配两者。您可以在输入日期无效的情况下进行一些验证。

          <v-text-field
             v-model="date_input"
             @input="onInput"
            label="Regular"
          ></v-text-field>
    
    <v-date-picker v-model="valid_date" @change="dateChange"></v-date-picker>




        onInput(val){
          const newDate = moment(val);
          if (newDate.isValid()){
            this.valid_date = newDate.format('YYYY-MM-DD')
          }
        },
        dateChange(date){
          this.date_input = date
        }

https://codepen.io/timfranklin/pen/vYmdEXM?editors=1011