Add a 'clear' button on the right of the date input element (baserow#5245)

Author: picklepete

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"
+}

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>

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;

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-->