LF2/Alisa
6
0
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

web: fix v-date-pickers working now

Browse source 
Co-authored-by: Schmackofatz <Schmackofatz@gmail.com>
This commit is contained in:
Mika 2024-07-10 18:35:32 +02:00
parent 62ba46d201
commit f8e2b87e9c
1 changed files with 29 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
web/src/components/HeaderBar.vue
View file

@ -33,23 +33,28 @@
v-model="addLicenseName" v-model="addLicenseName"
variant="outlined" variant="outlined"
required required
clearable
></v-text-field> ></v-text-field>
<div> <div>
<div class="mb-2"> <div class="mb-3">
<v-menu> <v-menu>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-text-field <v-text-field
v-bind="props" v-bind="props"
label="Start Date (optional)" label="Start Date (optional)"
variant="outlined" variant="outlined"
v-model="addStartDate" :model-value="addStartDateDisplay"
readonly @click:clear="(event: Event) => addStartDate = undefined"
> readonly
clearable
hide-details
>
</v-text-field> </v-text-field>
</template> </template>
<v-date-picker <v-date-picker
v-model="addStartDate" v-model="addStartDate"
show-adjacent-months
></v-date-picker> ></v-date-picker>
</v-menu> </v-menu>
</div> </div>
@ -58,15 +63,19 @@
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-text-field <v-text-field
v-bind="props" v-bind="props"
label="Start Date (optional)" label="Stop Date (optional)"
variant="outlined" variant="outlined"
v-model="addStopDate" :model-value="addStopDateDisplay"
@click:clear="(event: Event) => addStopDate = undefined"
readonly readonly
clearable
hide-details
> >
</v-text-field> </v-text-field>
</template> </template>
<v-date-picker <v-date-picker
v-model="addStopDate" v-model="addStopDate"
show-adjacent-months
></v-date-picker> ></v-date-picker>
</v-menu> </v-menu>
</div> </div>
@ -75,11 +84,13 @@
label="Amount (optional)" label="Amount (optional)"
v-model="addAmount" v-model="addAmount"
variant="outlined" variant="outlined"
clearable
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="Notes (optional)" label="Notes (optional)"
v-model="addNotes" v-model="addNotes"
variant="outlined" variant="outlined"
clearable
></v-text-field> ></v-text-field>
<span class="dialogNote "> all fields marked with * are required </span> <span class="dialogNote "> all fields marked with * are required </span>
</div> </div>
@ -137,9 +148,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { store } from '@/store'; import { store } from '@/store';
import { Plus, LogOut, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next'; import { Plus, LogOut, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next';
import { ref } from 'vue'; import { computed, ref } from 'vue';
import { useDate } from 'vuetify' // Used for unifying Date inputs to ISO
function handlelogout() { function handlelogout() {
console.log('logout'); console.log('logout');
@ -153,9 +162,10 @@ const addAmount = ref('');
const addNotes = ref(''); const addNotes = ref('');
// Date Picker // Date Picker
//this fucked it up somehow: new Date().toISOString().substr(0, 10) const addStartDate = ref<Date | undefined>();
const addStartDate = ref(); const addStartDateDisplay = computed<string>(() => addStartDate.value ? addStartDate.value.toLocaleDateString() : "");
const addStopDate = ref(); const addStopDate = ref<Date | undefined>();
const addStopDateDisplay = computed<string>(() => addStopDate.value ? addStopDate.value.toLocaleDateString(): "");
</script> </script>