html - Vuetify 需要日期选择器并且不允许文本输入

Question

我正在使用 vuetify 为用户的生日做一个日期选择器。我希望我的表单中需要日期选择器并且只接受日期值。这是我尝试过的:

<v-flex xs12>
  <v-menu
    ref="menu"
    v-model="menu"
    :rules="requiredRules"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    full-width
    min-width="290px"
  >
  <template v-slot:activator="{ on }">
    <v-text-field
      :rules="requiredRules"
      v-model="date"
      label="Birthday date"
      append-icon="event"
      outlined
      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-flex>

    export default {    
      data() {
        return {
          requiredRules: [v => !!v || "This field is required"],
        }
      }
    }

使用此代码我无法在日期字段框中键入文本，但它似乎不是必需的。

如果我删除 readonly 然后它变成必需的，但我可以在日期字段框中键入文本，尽管我的必需规则仍然适用。

如何使日期字段框既是必需的又不接受文本？

提前致谢。

Answer 1

只需将规则添加到 v-text-field

<v-menu v-model="datemenu">
  <template v-slot:activator="{on}">
    <v-text-field
      v-model="date"
      v-on="on"
      label="Something"
      :rules="[v => !!v || 'Required']"
    ></v-text-field>
  </template>
  <v-date-picker v-model="date" @input></v-date-picker>
</v-menu>