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

Posted 2023-02-22

【中文标题】Vuetify 需要日期选择器并且不允许文本输入

【英文标题】：Vuetify make date picker required and do not allow text input

【发布时间】：2019-12-08 11:06:29

【问题描述】：

我正在使用 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-
  >
  <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，那么它就成为必需的，但我可以在日期字段框中输入文本，尽管我的必需规则仍然适用。

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

提前致谢。

【问题讨论】：

假设您在 date 模型上设置了一个初始值，则可能不再需要此 required 规则，因为负责更新该值的唯一组件是日期选择器（除非它可以在其他地方设置，不知何故）。

我没有在日期模型上设置初始值。这是一个生日输入，所以我不希望用户不小心忘记更新它。

您如何验证输入元素？您是否将它们嵌套在v-form 中？如果它最初为空，则当您将注意力移出文本字段时，验证应该会起作用。

是的，我将它们嵌套在 v 形中。当我关注文本字段时，表单内的其他输入元素遵守所需的规则。只是日期选择器文本字段包装在不合作的 v-menu 中

【参考方案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>

【讨论】：

轻微修正“v!!”应该是 "!!v" :rules="[v => !!v || 'Required']"