<template>
  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="value"
    lazy
    transition="scale-transition"
    offset-y
    full-width
    min-width="290px">
    <v-text-field
      slot="activator"
      v-model="dateField"
      :label="label"
      prepend-icon="event"
      readonly
      ></v-text-field>
    <v-date-picker
      :value="dateField"
      @input="changeDate($event)"
      locale="nl"
      show-week
      ref="datePicker"
      no-title
      >
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">Annuleer</v-btn>
    </v-date-picker>
  </v-menu>
</template>

<script>
export default {
  name: 'DatePicker',
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      menu: false,
      dateField: this.value,
    };
  },
  props: ['value', 'label'],
  methods: {
    changeDate(newDate) {
      this.dateField = newDate;
      this.menu = false;
      this.$emit('change', newDate);
    },
  },
};
</script>