如何在Vuetify中检查日期是否为空?

时间:2019-09-10 07:18:05

标签: html vue.js vuetify.js

我想检查用户是否输入了日期,如果没有输入,他应该得到一条错误消息。

我尝试使用规则进行操作,但没有显示错误消息。

这是我的代码:

模板:

l = ['Norway', 'Denmark']
out = (df.drop_duplicates()
         .COUNTRY_NAME.isin()
         .groupby(df['SR. NO'])
         .sum() 
         .lt(len(l)))
out.index[out].values.tolist()
# [3, 4]

脚本:

<v-form ref="form" v-model="valid">
<v-menu
                          :rules="birthdayRule"
                          ref="menu"
                          v-model="menu"
                          :close-on-content-click="false"
                          transition="scale-transition"
                          offset-y
                          full-width
                          min-width="290px"
                        >
                          <template v-slot:activator="{ on }">
                            <v-text-field v-model="date" label="Birthday" readonly v-on="on"></v-text-field>
                          </template>
                          <v-date-picker
                            ref="picker"
                            v-model="date"
                            :max="new Date().toISOString().substr(0, 10)"
                            min="1950-01-01"
                            @change="save"
                          ></v-date-picker>
                        </v-menu>
</v-form>

<v-btn color="primary" depressed @click="this.$refs.form.validate()">Submit</v-btn>

2 个答案:

答案 0 :(得分:1)

您必须将该规则传递给v-date-picker,而不是菜单。

 <v-date-picker
   ref="picker"
   v-model="date"
   :max="new Date().toISOString().substr(0, 10)"
   min="1950-01-01"
   @change="save"
   :rules="birthdayRule"
 ></v-date-picker>

答案 1 :(得分:1)

通过放入

解决

:rules="birthdayRule"

<v-text-field>标签而不是<v-date-picker>标签

代码:

<template v-slot:activator="{ on }">
  <v-text-field :rules="birthdayRule" v-model="date" label="Birthday" readonly v-on="on"> 
  </v-text-field>
</template>