96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<template>
|
|
<v-dialog v-model="menuChangeBirthday" width="900">
|
|
<v-card>
|
|
<v-card-item class="bg-primary py-3 elevation-6">
|
|
<v-card-title>
|
|
{{ $t("message.changeBirthday.title") }}
|
|
</v-card-title>
|
|
</v-card-item>
|
|
<v-card-text
|
|
class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
|
|
>
|
|
<v-menu
|
|
v-model="menuBirthday"
|
|
:close-on-content-click="false"
|
|
transition="scale-transition"
|
|
offset-y
|
|
min-width="330px"
|
|
max-width="290px"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-text-field
|
|
:model-value="formatBirthday()"
|
|
:label="$t('message.changeBirthday.datePicker')"
|
|
prepend-inner-icon="mdi-calendar"
|
|
hide-details
|
|
readonly
|
|
variant="outlined"
|
|
v-bind="props"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
hide-header
|
|
show-adjacent-months
|
|
rounded="lg"
|
|
color="primary"
|
|
v-model="birthday"
|
|
@update:modelValue="menuBirthday = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="px-7">
|
|
<v-btn
|
|
:text="$t('message.changeBirthday.close')"
|
|
variant="text"
|
|
class="text-error"
|
|
@click="onCloseMenuChangeBirthday()"
|
|
></v-btn>
|
|
<v-btn
|
|
:text="$t('message.changeBirthday.save')"
|
|
variant="text"
|
|
class="text-primary"
|
|
@click="onSaveChangeBirthday()"
|
|
></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ChangeBirthdayDialog",
|
|
data() {
|
|
return {
|
|
menuBirthday: false,
|
|
};
|
|
},
|
|
computed: {
|
|
menuChangeBirthday() {
|
|
return this.$store.state.collection.menuChangeBirthday;
|
|
},
|
|
birthday: {
|
|
get() {
|
|
return this.$store.state.collection.birthday;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("setBirthday", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
onCloseMenuChangeBirthday() {
|
|
this.$store.commit("setMenuChangeBirthday", false);
|
|
},
|
|
formatBirthday() {
|
|
if (!this.birthday) return null;
|
|
|
|
return moment(this.birthday).format("DD-MM-YYYY");
|
|
},
|
|
onSaveChangeBirthday() {
|
|
this.$store.commit("setMenuChangeBirthday", false);
|
|
},
|
|
},
|
|
};
|
|
</script>
|