search

vaadin / vaadin-date-picker

The Web Component providing a date selection field with scrollable month calendar. Part of the Vaadin components.
https://vaadin.com/components
Apache License 2.0
165 stars 78 forks source link

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

Closed ismarslomic closed 3 years ago

ismarslomic commented 3 years ago

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?

ismarslomic commented 3 years ago

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>