Vuetify, how to use a validation between two timepickers?

I have two timepickers in my vuetify app, I want that the first timepicker time must be less to the second timepicker. The time of the second timepicker must be greather then the first.

For example when on the first timepicker user choose time 9am, at second timepicker it will be disabled to choose hours before 9am and enabled only greater than 9am.

My code is here:

pickers.js


<v-text-field
v-model=“time1”
label=“Frist clock”
prepend-icon=“mdi-clock-time-four-outline”
readonly

                ></v-text-field>
              </template>
              <v-time-picker
                v-if="menu1"
                v-model="time1"
                full-width
                :allowed-minutes="allowedStep"
                @click:minute="$refs.menu.save(time)"
              ></v-time-picker> </v-menu
          ></v-col>

          <v-col cols="11" md="4">
            <v-time-picker v-if="modal" v-model="time" full-width :allowed-hours="allowedHours">
              <v-spacer></v-spacer>
              <v-btn text color="primary" @click="modal2 = false">
                Cancel
              </v-btn>
              <v-btn text color="primary" @click="$refs.dialog.save(time)">
                OK
              </v-btn>
            </v-time-picker>

            <v-menu
              ref="menu"
              v-model="menu2"
              :close-on-content-click="false"
              :nudge-right="40"
              :return-value.sync="time"
              transition="scale-transition"
              offset-y
              max-width="290px"
              min-width="290px"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-text-field
                  v-model="time2"
                  label="Second clock"
                  prepend-icon="mdi-clock-time-four-outline"
                  readonly
                  v-bind="attrs"
                  :disabled="disabledPicker2"
                  v-on="on"
                ></v-text-field>
              </template>
              <v-time-picker
                v-if="menu2"
                v-model="time2"
                full-width
                :allowed-minutes="allowedStep"
                @click:minute="$refs.menu.save(time)"
              ></v-time-picker> </v-menu
          ></v-col>
          <v-spacer></v-spacer>

          <v-col cols="11" md="6">
            <v-time-picker v-if="modal" v-model="time" full-width>
              <v-spacer></v-spacer>
              <v-btn text color="primary" @click="modal2 = false">
                Cancel
              </v-btn>
              <v-btn text color="primary" @click="$refs.dialog.save(time)">
                OK
              </v-btn>
            </v-time-picker>

scritpt.js

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!