web: rework date picker

web/src/components/HeaderBar.vue

@@ -31,46 +31,24 @@
                   ></v-text-field>
                   <div>
                     <div class="mb-3">
-                      <v-menu>
+                      <v-date-input
-                        <template v-slot:activator="{ props }">
+                        label="Start Date (optional)"
-                          <v-text-field
+                        variant="outlined"
-                            v-bind="props"
+                        prepend-icon=""
-                            label="Start Date (optional)"
+                        prepend-inner-icon="mdi-calendar-check"
-                            variant="outlined"
+                        clearable
-                            :model-value="addStartDateDisplay"
+                        v-model="addStartDate"
-                            @click:clear="(event: Event) => addStartDate = undefined"
+                      ></v-date-input>
-                            readonly
-                            clearable
-                            hide-details
-                          >
-                          </v-text-field>
-                        </template>
-                        <v-date-picker
-                          v-model="addStartDate"
-                          show-adjacent-months
-                        ></v-date-picker>
-                      </v-menu>
                     </div>
                     <div class="mb-5">
-                      <v-menu>
+                      <v-date-input
-                        <template v-slot:activator="{ props }">
+                        label="Stop Date (optional)"
-                          <v-text-field
+                        variant="outlined"
-                            v-bind="props"
+                        prepend-icon=""
-                            label="Stop Date (optional)"
+                        prepend-inner-icon="mdi-calendar-remove"
-                            variant="outlined"
+                        clearable
-                            :model-value="addStopDateDisplay"
+                        v-model="addStopDate"
-                            @click:clear="(event: Event) => addStopDate = undefined"
+                      ></v-date-input>
-                            readonly
-                            clearable
-                            hide-details
-                          >
-                          </v-text-field>
-                        </template>
-                        <v-date-picker
-                          v-model="addStopDate"
-                          show-adjacent-months
-                        ></v-date-picker>
-                      </v-menu>
                     </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

web/src/plugins/vuetify.ts

@@ -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,
   },
 });