时间戳

首页 > 解决方案 > 手动输入日期和/或使用日历 vuetify

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

问题描述

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

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

我的问题是，我必须手动处理这个错误还是有一些更实用的方法来修复（也许有一些道具）？或者至少如果你能给我一些关于 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')
      }
    },

标签： vue.jsvuetify.js

解决方案

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

          <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

推荐阅读