在 vuetify 中，如何验证 v-time-pickers

Question

我在我的 vuetify 项目中使用了两个 v-time-pickers。我想验证我的时间选择器，它不可能比第一次选择器更早地选择第二次选择器。

例如，在第一个时间选择器上，用户将选择时间：上午 9 点，在第二个选择器上，将无法选择上午 9 点之前的时间，并且只能从上午 10 点开始启用。

https://vuetifyjs.com/en/components/time-pickers/#dialog-and-menu

代码：

pickers.js

    <v-menu
        ref="menu"
        v-model="menu2"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="time"
        lazy
        transition="scale-transition"
        offset-y
        full-width
        max-width="290px"
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            v-model="time"
            label="Picker in menu"
            prepend-icon="access_time"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="menu2"
          v-model="time"
          full-width
          @click:minute="$refs.menu.save(time)"
        ></v-time-picker>
      </v-menu>
    </v-flex>
    <v-spacer></v-spacer>
    <v-flex xs11 sm5>
      <v-dialog
        ref="dialog"
        v-model="modal2"
        :return-value.sync="time"
        persistent
        lazy
        full-width
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            v-model="time"
            label="Picker in dialog"
            prepend-icon="access_time"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="modal2"
          v-model="time"
          full-width
        >
          <v-spacer></v-spacer>
          <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
          <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
        </v-time-picker>
      </v-dialog>

script.js

<script>
  export default {
    data () {
      return {
        time: null,
        menu2: false,
        modal2: false
      }
    }
  }
</script>
content_copy

Answer 1

您可以利用 v-time-picker 组件中的 allowed-hours 和 minutes 属性：

<v-time-picker
      v-if="modal2"
      v-model="time"
      :allowed-hours="allowedHours"
      :allowed-minutes="allowedMinutes"
      full-width
    >

并在脚本中自定义您的逻辑：

methods: {
      allowedHours: v => v % 2,
      allowedMinutes: v => v >= 10 && v <= 50
    },

在 vuetify 中，如何验证 v-time-pickers

In vuetify, how to validate v-time-pickers

javascript

vue.js

validation

vuetify.js

datetimepicker