refactor: clearable DatePicker

src/components/shared/DatePicker.vue

@@ -9,6 +9,7 @@ const model = defineModel<string | Date | null>();
 const props = defineProps<{
   id?: string;
   readonly?: boolean;
+  clearable?: boolean;
   label?: string;
   rules?: ((value: string) => string | true)[];
   disabledDates?: string[] | Date[] | ((date: Date) => boolean);
@@ -54,6 +55,7 @@ function valueUpdate(value: string) {
     utc
     auto-apply
     :id
+    :for="id"
     :disabled="readonly"
     :disabled-dates="disabledDates"
     :teleport="true"
@@ -100,6 +102,15 @@ function valueUpdate(value: string) {
             color="primary"
           />
         </template>
+        <template v-if="clearable" v-slot:append>
+          <q-icon
+            v-if="model && !readonly"
+            name="mdi-close-circle"
+            class="cursor-pointer app-text-muted"
+            size="sm"
+            @click.stop="model = undefined"
+          />
+        </template>
       </q-input>
     </template>
   </VueDatePicker>