Vuetify datetime picker

DatetimePicker.vue

<template>
  <div>
    <v-menu
      v-model="dialog"
      :close-on-content-click="false"
      :nudge-width="200"
      max-width="290"
      offset-y
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="value"
          :label="label"
          v-bind="$attrs"
          v-on="on"
          readonly
        ></v-text-field>
        <VMessages :value="errorBucket" color="error" />
      </template>
      <template v-slot:default="dialog">
        <v-card>
          <v-tabs v-model="tabs" fixed-tabs>
            <v-tabs-slider></v-tabs-slider>
            <v-tab href="#pick-date" class="primary--text">
              <v-icon>mdi-calendar</v-icon>
            </v-tab>

            <v-tab href="#pick-time" class="primary--text" v-if="datePicker">
              <v-icon>mdi-clock</v-icon>
            </v-tab>
          </v-tabs>
          <v-tabs-items v-model="tabs">
            <v-tab-item value="pick-date">
              <v-date-picker v-model="datePicker"></v-date-picker>
            </v-tab-item>
            <v-tab-item value="pick-time">
              <v-time-picker
                format="ampm"
                v-model="timePicker"
                scrollable
              ></v-time-picker>
            </v-tab-item>
          </v-tabs-items>
          <v-card-text> </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn text @click="clear()" v-if="clearable">Clear</v-btn>
            <v-btn text @click="dialog.value = false">OK</v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-menu>
  </div>
</template>

<script>
import VInput from "vuetify/lib/components/VInput/VInput.js";

export default {
  extends: VInput,
  data() {
    return {
      dialog: false,
      datePicker: "",
      timePicker: "",
      tabs: null,
    };
  },
  props: {
    value: {
      required: false,
      type: [String],
    },
    required: {
      required: false,
      type: [Boolean],
    },
    label: {
      required: false,
      type: [String],
    },
    clearable: {
      required: false,
      type: [Boolean],
    },
    preset: {
      required: false,
      type: [Boolean],
    },
  },
  watch: {
    datePicker: function () {
      this.$emit("input", this.datePicker + " " + this.timePicker);
      this.$set(this, "tabs", "pick-time");
    },
    timePicker: function () {
      this.$emit("input", this.datePicker + " " + this.timePicker);
    },
    clear: function () {
      this.$set(this, "datePicker", null);
      this.$set(this, "timePicker", null);
      this.$emit("input", null);
    },
  },
  methods: {
    clear() {
      this.datePicker = "";
      this.timePicker = "";
      this.$emit("input", null);
    },
  },
  mounted() {
    if (this.preset) {
      const time = new Date().toLocaleTimeString("en-US", {
        hour12: false,
        hour: "numeric",
        minute: "numeric",
      });
      const date = new Date().toISOString().substr(0, 10);
      this.$set(this, "datePicker", date);
      this.$set(this, "timePicker", time);
      this.$emit("input", date + " " + time);
    }
  },
};
</script>

example.vue

<DateTime
  label="Date"
  :rules="dateRules"
  v-model="date"
  :required="true"
  :preset="true"
  :clearable="true"
></DateTime>

Let say I have to restrict the date selection and time selection on pickers.
How can I do that?

@wackyapps By restricting do you mean to limit the date/time to a specific date/time? or range? Please be more descriptive so I'll understand what exactly do you want to achieve.

Range.
from date time : to date time

16 may 2021 @12:00:00 to 18 may 2021 @15:00:00

@wackyapp The Vuetify Datepicker element doesn't supports it in terms of UI. So you can't really limit the user from clicking on any date. But you can limit it in the script. So when the user selects a date then you can check if the timestamp is within a certain range.