New to Kendo UI for Angular? Start a free 30-day trial

Adding Preset Range Buttons in the DateRange


ProductProgress® Kendo UI® DateRange for Angular


How can I add buttons like 'This Week', 'Past Week', 'Last Month', and other options in the Kendo UI for Angular DateRange component such that it sets the range according to the selected button?


  1. Define the Kendo UI for Angular DateRange component.

  2. To render custom content in the Kendo UI for Angular DateRange, use the kendoDateRangePopupTemplate in the DateRangePopup component.

             <ng-template kendoDateRangePopupTemplate> </ng-template>
  3. Inside the kendoDateRangePopupTemplate, add the Kendo UI for Angular Drawer component. The Drawer can be replaced with any other Kendo UI for Angular component as desired.

            <ng-template kendoDateRangePopupTemplate>
                    <kendo-drawer #drawer (select)="onSelect($event)"> </kendo-drawer>
                        <kendo-multiviewcalendar kendoDateRangeSelection> </kendo-multiviewcalendar>
  4. Handle the select event of the Drawer and set the DateRange start and end dates based on the selected preset range option.

    public onSelect(e: DrawerSelectEvent): void {
        switch (e.item.text) {
            case 'Today': {
                const today = new Date();
                this.range = {
                    start: today,
                    end: today,
  5. Close the popup when pressing the Esc key or clicking outside its boundaries. For more details, check the On Document Click or Escape article.

The following example demonstrates the full implementation of the suggested approach.

View Source
Change Theme:

See Also

In this article

Not finding the help you need?