diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 8e0ef2890..ff1dfb2fb 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -16,6 +16,8 @@ const props = defineProps({
         default: false,
     },
 });
+const focus = ref(false);
+
 const emit = defineEmits(['update:modelValue']);
 const value = computed({
     get() {
@@ -50,33 +52,30 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+function maxDate(date) {
+    const today = formatDate(new Date());
+    return date <= today;
+}
 </script>
 
 <template>
-    <QInput
-        class="vn-input-date"
-        rounded
-        readonly
-        :model-value="toDate(value)"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-    >
-        <template #append>
-            <QIcon name="event" class="cursor-pointer">
-                <QPopupProxy
-                    v-model="isPopupOpen"
-                    cover
-                    transition-show="scale"
-                    transition-hide="scale"
-                    :no-parent-event="props.readonly"
-                >
-                    <QDate
-                        :model-value="formatDate(value)"
-                        @update:model-value="onDateUpdate"
-                    />
-                </QPopupProxy>
-            </QIcon>
-        </template>
-    </QInput>
+    <div @mouseover="focus = true" @mouseleave="focus = false">
+        <QInput
+            class="vn-input-date"
+            rounded
+            readonly
+            :model-value="toDate(value)"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="onDateUpdate(null)"
+                ></QIcon>
+                <QIcon name="event" class="cursor-pointer">
+                    <QPopupProxy
 </template>
 
 <style lang="scss">