Kendo DateRange disabledDates not working

[Bhavani]

I’m working with the Kendo DateRange component and I need to disable future dates. I attempted to use [disabledDates]="dates", but this option is not available. How can I achieve this?

              <kendo-daterange>
                  <div class="col col-6 custDatePickerWidth">
                    <label>Created Date From</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateFrom" kendoDateRangeStartInput
                        formControlName="createdDateFrom" [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                  </div>
                  <span class="line">-</span>
                <div class="col col-6 custDatePickerWidth toDate">
                    <label>Created Date To</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateTo" kendoDateRangeEndInput formControlName="createdDateTo"
                        [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                </div>
              </kendo-daterange>

[Hetali]

Hello Bhavani,

In order to disable the future dates in the Kendo UI DateRange component, use the Kendo UI MultiViewCalendar with the DateRangeSelectionDirective in the DateRangePopupComponent. For example:

<kendo-daterange>
  <kendo-dateinput kendoDateRangeStartInput [max]="maxDate">
  </kendo-dateinput>
  <kendo-dateinput kendoDateRangeEndInput [max]="maxDate">
  </kendo-dateinput>

  <kendo-daterange-popup>
    <ng-template kendoDateRangePopupTemplate>
      <kendo-multiviewcalendar kendoDateRangeSelection>
      </kendo-multiviewcalendar>
    </ng-template>
  </kendo-daterange-popup>
</kendo-daterange>

public maxDate: Date = new Date(2024, 9, 3);

Output:

Here's the StackBlitz demo of the above mentioned code snippet.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Bhavani]

Hello Hetali,

Sure let me check.  And instead of hide future date. is it possible to disable dates

 

Regards

bhavani

[Hetali]

Hi Bhavani,

You can disable the dates by using the disabledDates function. For example:

<kendo-multiviewcalendar kendoDateRangeSelection [disabledDates]="disabledDates">
</kendo-multiviewcalendar>

public disabledDates = (date: Date): boolean => {
  return date > this.maxDate;
};

Output:

In this updated StackBlitz example, I have disabled the dates in the DateRange popup.

Let me know if it helps.

Regards,
Hetali
Progress Telerik

[Bhavani]

Hello Hetail, 

Thank you so much.

one Final doubt.  After selection on from and to dates from calendar popup not closing. how can i achieve this

[Hetali]

Hi Bhavani,

In order to close the popup upon date range selection, use the valueChange event in the end DateInput to set the show field of the popup to false. For example:

<kendo-daterange>
  <kendo-dateinput kendoDateRangeStartInput [(value)]="rangeSelectionValue.start">
  </kendo-dateinput>
  <kendo-dateinput kendoDateRangeEndInput [(value)]="rangeSelectionValue.end" (valueChange)="valueChange($event)">
  </kendo-dateinput>

  <kendo-daterange-popup #daterangepopup>
    <ng-template kendoDateRangePopupTemplate>
      <kendo-multiviewcalendar kendoDateRangeSelection [disabledDates]="disabledDates">
      </kendo-multiviewcalendar>
    </ng-template>
  </kendo-daterange-popup>
</kendo-daterange>

@ViewChild('daterangepopup') public daterangepopup;

public rangeSelectionValue: SelectionRange = {
  start: null,
  end: null,
};

public valueChange(e) {
  if(this.rangeSelectionValue.start && this.rangeSelectionValue.end) {
    this.daterangepopup.show = false;
  }
}

Output:

In this updated StackBlitz example, the date range popup closes upon range selection.

Let me know if this helps.

Regards,
Hetali
Progress Telerik

[Bhavani]

Thank you so much. It worked