web: rework date picker
This commit is contained in:
parent
822f9eeb28
commit
d36bb7ca6b
2 changed files with 18 additions and 45 deletions
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue