From f7575f65813feed8069c781af2edef9a792fea03 Mon Sep 17 00:00:00 2001
From: PatrickJunod <patrick@junod.ch>
Date: Fri, 3 May 2024 15:44:00 +0200
Subject: [PATCH] [4.x] Remove clear button of readonly date field (#9993)

---
 resources/js/components/fieldtypes/date/RangePopover.vue  | 2 +-
 resources/js/components/fieldtypes/date/SinglePopover.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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>