web: add initial date picker

web/src/components/HeaderBar.vue

@@ -36,12 +36,24 @@
               ></v-text-field>
               <div>
                 <div class="mb-2">
-                  <v-btn prepend-icon stacked variant="outlined">
+                  <v-menu>
-                    <CalendarCheck/>
+                    <template v-slot:activator="{ props }">
-                  </v-btn>
+
+                    <v-text-field
+                      v-bind="props"
+                      label="Start Date (optional)"
+                      variant="outlined"
+                      v-model="addStartDate"
+                    >
+                    </v-text-field>
+                  </template>
+                  <v-date-picker
+                    v-modle="addStartDate"
+                  ></v-date-picker>
+                  </v-menu>
                 </div>
                 <div class="mb-5">
-                  <v-btn prepend-icon stacked variant="outlined">
+                  <v-btn stacked variant="outlined">
                     <CalendarX/>
                   </v-btn>
                 </div>
@@ -127,6 +139,8 @@ const addLicenseName = ref('');
 const addAmount = ref('');
 const addNotes = ref('');
 
+// Date Picker
+const addStartDate = ref(new Date().toISOString().substr(0, 10));
 
 </script>