diff --git a/resources/js/components/fieldtypes/date/RangePopover.vue b/resources/js/components/fieldtypes/date/RangePopover.vue
index 79379fa828..b50ded3499 100644
--- a/resources/js/components/fieldtypes/date/RangePopover.vue
+++ b/resources/js/components/fieldtypes/date/RangePopover.vue
@@ -37,7 +37,7 @@
                                 @focus="$emit('focus', $event.target)"
                                 @blur="$emit('blur')"
                             />
-                            <button @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                            <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
                                 <span>×</span>
                             </button>
                         </div>
diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
index 9fdcc03dd8..58a020971e 100644
--- a/resources/js/components/fieldtypes/date/SinglePopover.vue
+++ b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -32,7 +32,7 @@
                             @focus="$emit('focus', $event.target)"
                             @blur="$emit('blur')"
                         />
-                        <button @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                        <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
                             <span>×</span>
                         </button>
                     </div>