web: rework date picker

This commit is contained in:
Mika 2024-07-11 09:59:44 +02:00
parent 822f9eeb28
commit d36bb7ca6b
2 changed files with 18 additions and 45 deletions

View file

@ -31,46 +31,24 @@
></v-text-field>
<div>
<div class="mb-3">
<v-menu>
<template v-slot:activator="{ props }">
<v-text-field
v-bind="props"
label="Start Date (optional)"
variant="outlined"
:model-value="addStartDateDisplay"
@click:clear="(event: Event) => addStartDate = undefined"
readonly
clearable
hide-details
>
</v-text-field>
</template>
<v-date-picker
v-model="addStartDate"
show-adjacent-months
></v-date-picker>
</v-menu>
<v-date-input
label="Start Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-check"
clearable
v-model="addStartDate"
></v-date-input>
</div>
<div class="mb-5">
<v-menu>
<template v-slot:activator="{ props }">
<v-text-field
v-bind="props"
label="Stop Date (optional)"
variant="outlined"
:model-value="addStopDateDisplay"
@click:clear="(event: Event) => addStopDate = undefined"
readonly
clearable
hide-details
>
</v-text-field>
</template>
<v-date-picker
v-model="addStopDate"
show-adjacent-months
></v-date-picker>
</v-menu>
<v-date-input
label="Stop Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-remove"
clearable
v-model="addStopDate"
></v-date-input>
</div>
</div>
<v-number-input
@ -206,13 +184,7 @@ const addNotes = ref<string | undefined>("");
// Date Picker
const addStartDate = ref<Date | undefined>();
const addStartDateDisplay = computed<string>(() =>
addStartDate.value ? addStartDate.value.toLocaleDateString() : ""
);
const addStopDate = ref<Date | undefined>();
const addStopDateDisplay = computed<string>(() =>
addStopDate.value ? addStopDate.value.toLocaleDateString() : ""
);
//
// EDIT SECTION

View file

@ -10,7 +10,7 @@ import "vuetify/styles";
// Composables
import { createVuetify } from "vuetify";
import { VNumberInput } from "vuetify/labs/components";
import { VNumberInput, VDateInput } from "vuetify/labs/components";
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
@ -31,5 +31,6 @@ export default createVuetify({
},
components: {
VNumberInput,
VDateInput,
},
});