CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2
Emar Wayne dela Cruz
Emar Wayne dela Cruz

Reputation: 11

Disabling specific dates for Kendo UI Datepicker in Angular 2

Is there a way to disable specific dates in Kendo UI's Datepicker component? I am aware that the current API does not support it but does anyone know a work around for this?

Upvotes: 0

Views: 1603

Answers (2)

Emar Wayne dela Cruz
Emar Wayne dela Cruz

Reputation: 11

Kendo UI team's response to my question:

Datepicker

<kendo-datepicker (open)="onOpen()"></kendo-datepicker>

Function

onOpen(e){
    setTimeout(()=>{
      document.querySelector('.k-widget.k-calendar.k-calendar-infinite .k-calendar-view .k-content.k-scrollable').addEventListener('scroll', () => {
        this.disableDates()
      })

      this.disableDates()

   })
}

public disableDates(){
      Array.from(document.querySelectorAll('tbody tr td')).forEach(td => {
        if(td.getAttribute('title') == 'Wednesday, July 4, 2018'){
          td.classList.add('disabled')
        }
      })
  }

CSS

.disabled{
     pointer-events: none;
     opacity: 0.5;
}

Plunker: https://plnkr.co/edit/f32f4pKDf4zwVyshZdfJ?p=preview

Upvotes: 0

Philipp
Philipp

Reputation: 1884

It is possible to "fake" disabled dates by visualizing and preventing the selection of those dates.

Step 1 - visualize disabled dates

Style the disabled dates by utilizing the kendoCalendarMonthCellTemplate directive. e.g. via a disabled class

<kendo-datepicker>
    <ng-template kendoCalendarMonthCellTemplate let-date>
        <span [class.disabled]="isDateDisabled(date)">
            {{ date.getDate() }}
        </span>
    </ng-template>
</kendo-datepicker>

Step 2 - prevent selection of disabled dates

In the valueChange event set the previous selected date if the selected date is disabled. 

onValueChange(newDate: Date) {
    if (this.isDateDisabled(newDate)) {
        this.date = this.lastDate;
    } else {
        this.date = newDate;
        this.lastDate = newDate;
    }
}

I've created an example showing this approach in action.

In the provided example I've also added a few tweaks. (e.g.: do not close the calendar if the selected date is disabled)

Upvotes: 1

Related Questions