Clear button for Date

[Ursus]

I have seen that this has been asked a couple of times but I cannot get it working in Angular using the bootstrap theme, maybe somebody could help me here? 

I would like a clear button that is inside the kendo-datepicker component (see attached image). The code is working correctly, only the CSS/HTML is the problem. Here is the snippet of HTML that I am using: 

<div class="row">
    <div class="col-sm">
      <div class="form-group">
        <kendo-label for="actTime">{{customMessageService.translate('formCardActivationTime')}}</kendo-label>
        <kendo-datepicker [(ngModel)]="actDate" (valueChange)="onActChange($event)">
        </kendo-datepicker>
        <button kendoButton fillMode="clear" icon="close" (click)="clearActDate()"></button>
      </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
        <kendo-label for="dactTime">{{customMessageService.translate('formCardDeactivationTime')}}</kendo-label>
        <kendo-datepicker [(ngModel)]="dactDate" (valueChange)="onDactChange($event)">
        </kendo-datepicker>
        <button kendoButton fillMode="clear" icon="close" (click)="clearDactDate()"></button>
      </div>
    </div>
  </div>

there is no additional CSS at the moment. I have tried to move the button within the datepicker and a lot of other things but I just cannot seem to get it to work 🙁 

Thank you for any help given.

Cheers

Ursus

 

[Novak]

This is ridiculous,

all Date/Time based components should have this feature out of box.

[Hetali]

Hi Ursus,

In order to add the clear button inside the Kendo UI DatePicker, manipulate the DOM as seen in the following custom approach in the AfterViewInit lifecycle hook:

ngAfterViewInit() {
  var inputButton = document.querySelectorAll(".k-input-button");

  inputButton.forEach((button, index) => {
    var btn = document.createElement("button");
    btn.setAttribute( "class", "k-button k-button-clear");

    var icon = document.createElement("span");
    icon.setAttribute("class", "k-button-icon k-icon k-i-close");

    btn.appendChild(icon);

    btn.addEventListener("click", (e) => {
      this.value[index] = null;
    });
    button.parentNode.insertBefore(btn, button);
  }); 
}

In this StackBlitz example, I have demonstrated the above discussed approach.

Please give it a try and let me know if it helps or if I can further assist you.

Regards,
Hetali
Progress Telerik