DateInput.vue

<template>
  <v-menu
    :close-on-content-click="false"
    v-model="show"
    :nudge-right="40"
    lazy
    transition="scale-transition"
    offset-y
    full-width
    max-width="290px"
    min-width="290px"
  >
    <v-text-field
      slot="activator"
      v-model="formatted"
      :label="label"
      hint="TT.MM.JJJJ Format"
      persistent-hint
      prepend-icon="event"
    ></v-text-field>
    <v-date-picker
      v-bind:value="value"
      v-on:input="setDate"
      no-title></v-date-picker>
  </v-menu>
</template>

<script>
import { toLocaleDateString } from '@/filters';

export default {
  data() {
    return {
      formatted: undefined,
      show: false,
    };
  },
  props: [
    'value',
    'label',
  ],
  watch: {
    value() {
      this.formatted = toLocaleDateString(this.value);
    },
  },
  methods: {
    setDate(date) {
      this.$emit('input', date);
      this.show = false;
    },
    parseDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split('.');
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
    },
  },
};
</script>