Allow to clear due date (#19201)

src/components/ha-date-input.ts

@@ -18,7 +18,8 @@ export interface datePickerDialogParams {
   max?: string;
   locale?: string;
   firstWeekday?: number;
-  onChange: (value: string) => void;
+  canClear?: boolean;
+  onChange: (value: string | undefined) => void;
 }
 
 const showDatePickerDialog = (
@@ -49,6 +50,8 @@ export class HaDateInput extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ type: Boolean }) public canClear?: boolean;
+
   render() {
     return html`<ha-textfield
       .label=${this.label}
@@ -58,6 +61,7 @@ export class HaDateInput extends LitElement {
       helperPersistent
       readonly
       @click=${this._openDialog}
+      @keydown=${this._keyDown}
       .value=${this.value
         ? formatDateNumeric(
             new Date(`${this.value.split("T")[0]}T00:00:00`),
@@ -82,13 +86,23 @@ export class HaDateInput extends LitElement {
       min: this.min || "1970-01-01",
       max: this.max,
       value: this.value,
+      canClear: this.canClear,
       onChange: (value) => this._valueChanged(value),
       locale: this.locale.language,
       firstWeekday: firstWeekdayIndex(this.locale),
     });
   }
 
-  private _valueChanged(value: string) {
+  private _keyDown(ev: KeyboardEvent) {
+    if (!this.canClear) {
+      return;
+    }
+    if (["Backspace", "Delete"].includes(ev.key)) {
+      this._valueChanged(undefined);
+    }
+  }
+
+  private _valueChanged(value: string | undefined) {
     if (this.value !== value) {
       this.value = value;
       fireEvent(this, "change");

src/components/ha-dialog-date-picker.ts

@@ -50,6 +50,15 @@ export class HaDialogDatePicker extends LitElement {
         @datepicker-value-updated=${this._valueChanged}
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
+      ${this._params.canClear
+        ? html`<mwc-button
+            slot="secondaryAction"
+            @click=${this._clear}
+            class="warning"
+          >
+            ${this.hass.localize("ui.dialogs.date-picker.clear")}
+          </mwc-button>`
+        : nothing}
       <mwc-button slot="secondaryAction" @click=${this._setToday}>
         ${this.hass.localize("ui.dialogs.date-picker.today")}
       </mwc-button>
@@ -66,6 +75,11 @@ export class HaDialogDatePicker extends LitElement {
     this._value = ev.detail.value;
   }
 
+  private _clear() {
+    this._params?.onChange(undefined);
+    this.closeDialog();
+  }
+
   private _setToday() {
     const today = new Date();
     this._value = format(today, "yyyy-MM-dd");

src/data/todo.ts

@@ -18,8 +18,8 @@ export interface TodoItem {
   uid: string;
   summary: string;
   status: TodoItemStatus;
-  description?: string;
+  description?: string | null;
-  due?: string;
+  due?: string | null;
 }
 
 export const enum TodoListEntityFeature {
@@ -83,9 +83,9 @@ export const updateItem = (
       item: item.uid,
       rename: item.summary,
       status: item.status,
-      description: item.description || undefined,
+      description: item.description || null,
       due_datetime: item.due?.includes("T") ? item.due : undefined,
-      due_date: item.due?.includes("T") ? undefined : item.due || undefined,
+      due_date: item.due?.includes("T") ? undefined : item.due || null,
     },
     { entity_id }
   );

src/panels/todo/dialog-todo-item-editor.ts

@@ -161,7 +161,8 @@ class DialogTodoItemEditor extends LitElement {
                     .value=${dueDate}
                     .locale=${this.hass.locale}
                     .disabled=${!canUpdate}
-                    @value-changed=${this._endDateChanged}
+                    @value-changed=${this._dueDateChanged}
+                    canClear
                   ></ha-date-input>
                   ${this._todoListSupportsFeature(
                     TodoListEntityFeature.SET_DUE_DATETIME_ON_ITEM
@@ -170,7 +171,7 @@ class DialogTodoItemEditor extends LitElement {
                         .value=${dueTime}
                         .locale=${this.hass.locale}
                         .disabled=${!canUpdate}
-                        @value-changed=${this._endTimeChanged}
+                        @value-changed=${this._dueTimeChanged}
                       ></ha-time-input>`
                     : nothing}
                 </div>
@@ -259,12 +260,16 @@ class DialogTodoItemEditor extends LitElement {
     this._description = ev.target.value;
   }
 
-  private _endDateChanged(ev: CustomEvent) {
+  private _dueDateChanged(ev: CustomEvent) {
+    if (!ev.detail.value) {
+      this._due = undefined;
+      return;
+    }
     const time = this._due ? this._formatTime(this._due) : undefined;
     this._due = this._parseDate(`${ev.detail.value}${time ? `T${time}` : ""}`);
   }
 
-  private _endTimeChanged(ev: CustomEvent) {
+  private _dueTimeChanged(ev: CustomEvent) {
     this._hasTime = true;
     this._due = this._parseDate(
       `${this._formatDate(this._due || new Date())}T${ev.detail.value}`
@@ -320,13 +325,13 @@ class DialogTodoItemEditor extends LitElement {
             TodoListEntityFeature.SET_DESCRIPTION_ON_ITEM
           )
             ? // backend should accept null to clear the field, but it doesn't now
-              " "
+              null
             : undefined),
         due: this._due
           ? this._hasTime
             ? this._due.toISOString()
             : this._formatDate(this._due)
-          : undefined,
+          : null,
         status: this._checked
           ? TodoItemStatus.Completed
           : TodoItemStatus.NeedsAction,

src/translations/en.json

@@ -1009,7 +1009,8 @@
         "crop_image": "Picture to crop"
       },
       "date-picker": {
-        "today": "Today"
+        "today": "Today",
+        "clear": "Clear"
       },
       "more_info_control": {
         "dismiss": "Dismiss dialog",