Adding Preset Range Buttons in the DateRange

Environment

Product

Progress® Kendo UI® DateRange for Angular

Description

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?

Solution

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.

   html

    <kendo-daterange>
        ...
        <kendo-daterange-popup>
            <ng-template kendoDateRangePopupTemplate> </ng-template>
        </kendo-daterange-popup>
    </kendo-daterange>

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.

   html

   <kendo-daterange>
       ...
       <kendo-daterange-popup>
           <ng-template kendoDateRangePopupTemplate>
               <kendo-drawer-container>
                   <kendo-drawer #drawer (select)="onSelect($event)"> </kendo-drawer>
                   <kendo-drawer-content>
                       <kendo-multiviewcalendar kendoDateRangeSelection> </kendo-multiviewcalendar>
                   </kendo-drawer-content>
               </kendo-drawer-container>
           </ng-template>
       </kendo-daterange-popup>
   </kendo-daterange>

4. Handle the select event of the Drawer and set the DateRange start and end dates based on the selected preset range option.

   ts

   public onSelect(e: DrawerSelectEvent): void {
       switch (e.item.text) {
           case 'Today': {
               const today = new Date();
               this.range = {
                   start: today,
                   end: today,
               };
               break;
           }
       }
   }

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.

Change Theme

Theme

Loading ...

See Also

• DateRange Popup Template
• Kendo UI for Angular Drawer component
• API Reference of the Drawer
• Close the DateRange Popup on pressing Esc key or clicking outside its boundary