Reset date picker field

const [date, setDate] = useState<Date | undefined>();

const setNewDate = (value: Date | undefined) => {
  setDate(value);
};

function setValue() {
  const d = new Date();
  d.setDate(d.getDate() - 7);
  setDate(d);
}

function clearValue() {
  setDate(undefined);
}

<GoabFormItem label="Date Picker">
  <GoabDatePicker
    name="item"
    value={date}
    onChange={(e) => setNewDate(e.value as Date)}
    mb="xl"
  />
</GoabFormItem>

<GoabButtonGroup mt="xs" alignment="start">
  <GoabButton onClick={setValue}>Set Value</GoabButton>
  <GoabButton onClick={clearValue}>Clear Value</GoabButton>
</GoabButtonGroup>

item: Date | undefined = undefined;

onChange(event: GoabDatePickerOnChangeDetail): void {
  this.item = event.valueStr ? new Date(event.valueStr) : undefined;
}

setValue(): void {
  const d = new Date();
  d.setDate(d.getDate() - 7);
  this.item = d;
}

clearValue(): void {
  this.item = undefined;
}

<goab-form-item label="Date Picker">
  <goab-date-picker (onChange)="onChange($event)" name="item" [value]="item">
  </goab-date-picker>
</goab-form-item>

<goab-button-group alignment="start" mt="xs">
  <goab-button (onClick)="setValue()">Set Value</goab-button>
  <goab-button (onClick)="clearValue()">Clear Value</goab-button>
</goab-button-group>

const datePicker = document.getElementById("date-picker");
const setValueBtn = document.getElementById("set-value-btn");
const clearValueBtn = document.getElementById("clear-value-btn");

datePicker.addEventListener("_change", (e) => {
  console.log("Date changed:", e.detail.value);
});

setValueBtn.addEventListener("_click", () => {
  const d = new Date();
  d.setDate(d.getDate() - 7);
  datePicker.setAttribute("value", d.toISOString());
});

clearValueBtn.addEventListener("_click", () => {
  datePicker.removeAttribute("value");
});

<goa-form-item version="2" label="Date Picker">
  <goa-date-picker version="2" id="date-picker" name="item"></goa-date-picker>
</goa-form-item>

<goa-button-group alignment="start" mt="xs">
  <goa-button version="2" id="set-value-btn">Set Value</goa-button>
  <goa-button version="2" id="clear-value-btn">Clear Value</goa-button>
</goa-button-group>