changes

app/components/datepicker/Datepicker.vue

@@ -13,8 +13,8 @@ const props = defineProps({
 const emit = defineEmits(["date"]);
 const { $copy, $dayjs, $empty } = useNuxtApp();
 
-const date = ref();
-const show = ref();
+const date = ref(null);
+const show = ref("");
 const error = ref(false);
 const focused = ref(false);
 const count1 = ref(0);
@@ -76,7 +76,7 @@ function doClick() {
 
 function selectDate(v) {
   date.value = v;
-  show.value = $dayjs(v).format("L");
+  show.value = !v ? "" : $dayjs(v).format("L");
   emit("date", date.value);
   if (focused.value) focused.value = false;
   count1.value = 0;
@@ -124,18 +124,32 @@ watch(
   >
     <div :class="['dropdown w-full', pos, focused && 'is-active']">
       <div class="dropdown-trigger w-full">
-        <input
-          :disabled="disabled"
-          :class="['input', error && 'is-danger', disabled && 'has-text-dark']"
-          type="text"
-          placeholder="DD/MM/YYYY"
-          maxlength="10"
-          @focus="setFocus"
-          @blur="lostFocus"
-          @keyup.enter="pressEnter"
-          @keyup="checkDate"
-          v-model="show"
-        />
+        <div class="control has-icons-right">
+          <input
+            :disabled="disabled"
+            :class="['input', error && 'is-danger', disabled && 'has-text-dark']"
+            type="text"
+            placeholder="DD/MM/YYYY"
+            maxlength="10"
+            @focus="setFocus"
+            @blur="lostFocus"
+            @keyup.enter="pressEnter"
+            @keyup="checkDate"
+            v-model="show"
+          />
+          <span
+            v-if="date"
+            @click="selectDate(null)"
+            class="icon is-small is-right is-clickable"
+          >
+            <div class="closeBtn rounded-full p-1">
+              <Icon
+                name="material-symbols:close-rounded"
+                class="is-block"
+              />
+            </div>
+          </span>
+        </div>
       </div>
       <div
         class="dropdown-menu"
@@ -159,3 +173,9 @@ watch(
     </span>
   </div>
 </template>
+
+<style scoped>
+.closeBtn:hover {
+  background-color: var(--bulma-grey-100);
+}
+</style>