Flaschengeist
/
flaschengeist-schedule
7
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Activity

AgendaView fix datepicker autoclose

This commit is contained in:
Ferdinand Thiessen 2021-11-22 13:01:22 +01:00
parent 6985904a3b
commit 82a24a5a53
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/overview/AgendaView.vue
View File

@ -24,13 +24,13 @@
<q-separator vertical /> <q-separator vertical />
<q-btn flat dense <q-btn flat dense
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }} >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
<q-popup-proxy transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="proxy" transition-show="scale" transition-hide="scale">
<q-date <q-date
ref="datepicker" ref="datepicker"
v-model="selectedDate" :model-value="selectedDate"
v-close-popup
mask="YYYY-MM-DD" mask="YYYY-MM-DD"
no-unset no-unset
@update:model-value="updateDate"
><q-btn v-close-popup label="jetzt" dense flat @click="datepicker?.setToday()" ><q-btn v-close-popup label="jetzt" dense flat @click="datepicker?.setToday()"
/></q-date> /></q-date>
</q-popup-proxy> </q-popup-proxy>
@ -91,7 +91,7 @@
import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue'; import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useEventStore } from '../../store'; import { useEventStore } from '../../store';
import EventSlot from './slots/EventSlot.vue'; import EventSlot from './slots/EventSlot.vue';
import { date, QDate, useQuasar } from 'quasar'; import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
import { startOfWeek } from '@flaschengeist/api'; import { startOfWeek } from '@flaschengeist/api';
import EditEvent from '../management/EditEvent.vue'; import EditEvent from '../management/EditEvent.vue';
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar'; import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
@ -105,6 +105,7 @@ export default defineComponent({
const quasar = useQuasar(); const quasar = useQuasar();
const datepicker = ref<QDate>(); const datepicker = ref<QDate>();
const proxy = ref<QPopupProxy>();
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD')); const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
const calendarView = ref('week'); const calendarView = ref('week');
@ -225,8 +226,13 @@ export default defineComponent({
editDone, editDone,
events, events,
datepicker, datepicker,
proxy,
remove, remove,
selectedDate, selectedDate,
updateDate: (ds: string) => {
selectedDate.value = ds;
proxy.value?.hide();
},
}; };
}, },
}); });