From d1f985de36fa1c24af54de6680d200118cbe133e Mon Sep 17 00:00:00 2001
From: Peter Evans <peter@baserow.io>
Date: Wed, 22 Apr 2026 14:16:21 +0100
Subject: [PATCH] Add a 'clear' button on the right of the date input element
 (#5245)

---
 ...2_add_clear_button_to_the_date_input_element.json |  9 +++++++++
 .../elements/baseComponents/ABDateTimePicker.vue     | 12 ++++++++++++
 .../elements/ab_components/ab_datetime_picker.scss   | 11 +++++++++++
 .../__snapshots__/DateTimePickerElement.spec.js.snap |  9 +++++++++
 4 files changed, 41 insertions(+)
 create mode 100644 changelog/entries/unreleased/feature/5202_add_clear_button_to_the_date_input_element.json

diff --git a/changelog/entries/unreleased/feature/5202_add_clear_button_to_the_date_input_element.json b/changelog/entries/unreleased/feature/5202_add_clear_button_to_the_date_input_element.json
new file mode 100644
index 0000000000..6c09dfcf04
--- /dev/null
+++ b/changelog/entries/unreleased/feature/5202_add_clear_button_to_the_date_input_element.json
@@ -0,0 +1,9 @@
+{
+    "type": "feature",
+    "message": "Add 'clear' button to the date input element.",
+    "issue_origin": "github",
+    "issue_number": 5202,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2026-04-21"
+}
\ No newline at end of file
diff --git a/web-frontend/modules/builder/components/elements/baseComponents/ABDateTimePicker.vue b/web-frontend/modules/builder/components/elements/baseComponents/ABDateTimePicker.vue
index 079176bb1b..84fcd371e6 100644
--- a/web-frontend/modules/builder/components/elements/baseComponents/ABDateTimePicker.vue
+++ b/web-frontend/modules/builder/components/elements/baseComponents/ABDateTimePicker.vue
@@ -26,6 +26,11 @@
         @blur="handleTimeBlur($event)"
       />
     </div>
+    <i
+      v-if="dateInputValue"
+      class="ab-datetime-picker__clear button-icon__icon iconoir-cancel"
+      @click="clearValue"
+    />
     <Context
       ref="dateContext"
       :hide-on-click-outside="true"
@@ -246,6 +251,13 @@ export default {
       this.updateTime(event.target.value)
       this.$refs.timeContext.hide()
     },
+    clearValue() {
+      this.$refs.dateContext.hide()
+      if (this.includeTime) {
+        this.$refs.timeContext.hide()
+      }
+      this.$emit('update:modelValue', null)
+    },
   },
 }
 </script>
diff --git a/web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_datetime_picker.scss b/web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_datetime_picker.scss
index f5a3b05802..07c7acc429 100644
--- a/web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_datetime_picker.scss
+++ b/web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_datetime_picker.scss
@@ -8,6 +8,17 @@
     var(--input-horizontal-padding, 12px);
 }
 
+.ab-datetime-picker__clear {
+  cursor: pointer;
+  color: var(--input-text-color, $black);
+  flex-shrink: 0;
+  margin-left: auto;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
 .ab-datetime-picker__input {
   &.ab-input {
     border: none;
diff --git a/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap b/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
index efd9827b24..e806427e73 100644
--- a/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
+++ b/web-frontend/test/unit/builder/components/elements/components/__snapshots__/DateTimePickerElement.spec.js.snap
@@ -37,6 +37,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
             <div>
               <!--v-if-->
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -90,6 +91,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
             <div>
               <!--v-if-->
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -143,6 +145,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
             <div>
               <!--v-if-->
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -201,6 +204,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -259,6 +263,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -317,6 +322,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -375,6 +381,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -433,6 +440,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->
@@ -491,6 +499,7 @@ exports[`DateTimePickerElement > placeholder corresponds to date and time format
                 value=""
               />
             </div>
+            <!--v-if-->
           </div>
           
           <!--v-if-->