vaadin/vaadin-date-picker

Example on displaying clear button with vaadin-date-picker-light

ismarslomic opened this issue · 1 comments

Hi,
I'm using vaadin-date-picker-light with custom input component, example:

<vaadin-date-picker-light
      .disabled=${this.disabled}
      @value-changed=${this._valueChanged}
      attr-for-value="value"
      .i18n=${i18n}
>
      <paper-input .label=${this.label} no-label-float>
        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
      </paper-input>
</vaadin-date-picker-light>

How can I add icon for clearing selected date, similar to the clear-button-visible property for vaadin-date-picker?

Posting solution on my own question:

<vaadin-date-picker-light
      .disabled=${this.disabled}
      @value-changed=${this._valueChanged}
      attr-for-value="value"
      .i18n=${i18n}
>
      <paper-input .label=${this.label} no-label-float>
        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
        <ha-svg-icon
              slot="suffix"
              part="clear-button"
              .path=${mdiDelete}
              @click=${this._clearDueDate}
            >
       </ha-svg-icon>
      </paper-input>
</vaadin-date-picker-light>