<template>
    <v-menu
        ref="init_menu_date"
        v-model="init_menu_date"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="init_date"
        lazy
        transition="scale-transition"
        offset-y
        full-width
        min-width="290px"
    >
        <v-text-field
            slot="activator"
            placeholder="-"
            label="Sampling Date"
            hide-details
            v-model="formatted_date"
        ></v-text-field>

        <v-date-picker v-model="init_date" no-title scrollable>
            <v-spacer></v-spacer>
            <v-btn flat color="primary" @click="init_menu_date = false">Cancel</v-btn>
            <v-btn flat color="primary" @click="$refs.init_menu_date.save(init_date)">OK</v-btn>
        </v-date-picker>
    </v-menu>
</template>

<script>
module.exports = {
    props : ['menu_date', 'date'],

    data () {
        return {
            init_menu_date : this.menu_date,
            init_date : this.date,
            formatted_date : this.date
        }
    },

    computed : {
    },

    watch : {
        init_date (n, o) {
            // this.formatted_date = this.formatDate(this.init_date);
        }
    }

    methods : {
        formatDate (date) {
            if (!date) return null

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