88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-dialog
|
|
ref="dialog"
|
|
v-model="modal"
|
|
:return-value.sync="date"
|
|
persistent
|
|
lazy
|
|
full-width
|
|
width="290px"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field
|
|
v-model="computedDateFormatted"
|
|
:label=init_label
|
|
readonly
|
|
v-on="on"
|
|
hint="MM/DD/YYYY format"
|
|
browser-autocomplete="off"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="init_date" no-title @input="modal = false" :max="init_max_date" scrollable>
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat color="primary" @click="modal = false">Cancel</v-btn>
|
|
<!-- <v-btn flat color="primary" @click="$refs.dialog.save(date)">OK</v-btn> -->
|
|
</v-date-picker>
|
|
</v-dialog>
|
|
</v-flex>
|
|
|
|
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props : ['label', 'date', 'data', 'max_date'],
|
|
|
|
data () {
|
|
return {
|
|
init_date: this.date && this.date != "0000-00-00" ? this.date : null, //new Date().toISOString().substr(0, 10),
|
|
init_max_date: this.max_date ? this.max_date : '2999-09-09',
|
|
dateFormatted: this.formatDate(new Date().toISOString().substr(0, 10)),
|
|
menu1: false,
|
|
menu2: false,
|
|
|
|
init_label: this.label ? this.label : 'Date',
|
|
init_data: this.data ? this.data : '',
|
|
|
|
modal: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
computedDateFormatted () {
|
|
return this.formatDate(this.init_date)
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
init_date (n, o) {
|
|
this.dateFormatted = this.formatDate(this.init_date)
|
|
|
|
this.$emit('change', {"old_date":o, "new_date":n, "data":this.init_data});
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
formatDate (date) {
|
|
if (!date) { return null }
|
|
|
|
const [year, month, day] = date.split('-')
|
|
return `${day}-${month}-${year}`
|
|
},
|
|
parseDate (date) {
|
|
if (!date) return null
|
|
|
|
const [month, day, year] = date.split('/')
|
|
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
|
|
},
|
|
|
|
emitChange (n, o) {
|
|
console.log("old:"+o)
|
|
console.log("new:"+n)
|
|
}
|
|
}
|
|
}
|
|
</script> |