[Vuetify] DateField

DateField.vue

<template>
  <div>
    <v-text-field
      class="v-date-field"
      :class="{ 'v-date-field--rounded': rounded }"
      :value="dateFormated"
      prepend-inner-icon="mdi-calendar-blank"
      readonly
      @click="open"
      :disabled="disabled"
      v-bind="$attrs"
      v-on="$listeners"
    />

    <v-dialog v-model="dialog" width="290px">
      <v-card>
        <v-date-picker
          v-model="date"
          full-width
          locale="fr"
          :active-picker.sync="picker"
          first-day-of-week="0"
          :min="minValue"
          :max="maxValue"
          @input="tab = 1"
        ></v-date-picker>

        <v-card-actions class="justify-space-between">
          <v-btn text @click="close">Fermer</v-btn>
          <v-btn color="primary" text @click="submit">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { format, formatISO, isValid, parseISO } from "date-fns";
import fr from "date-fns/locale/fr";

export default {
  props: {
    rounded: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Date,
      default: new Date()
    },
    min: {
      type: Date,
      default: null
    },
    max: {
      type: Date,
      default: null
    }
  },

  i18n: {
    messages: {
      fr: {
        date: "Date"
      }
    }
  },

  data() {
    return {
      tab: 0,
      dialog: false,
      date: null,
      picker: "YEAR"
    };
  },

  watch: {
    value: {
      immediate: true,
      handler() {
        if (!isValid(this.value)) return;

        this.date = format(this.value, "yyyy-MM-dd");
      }
    }
  },

  computed: {
    dateFormated() {
      return isValid(this.value)
        ? format(this.value, "PPP", { locale: fr })
        : "";
    },

    minValue() {
      return this.min ? formatISO(this.min) : null;
    },

    maxValue() {
      return this.max ? formatISO(this.max) : null;
    }
  },

  methods: {
    open() {
      if (!this.disabled) this.dialog = true;
    },
    close() {
      this.dialog = false;
    },
    submit() {
      const d = parseISO(this.date);

      if (isValid(d)) {
        this.$emit("input", d);
        this.close();
      }
    }
  }
};
</script>