How can I extend DatePicker to alow selection of "This Week", "This month" etc

[Manuel]

Hi.

 

I have seen the following Date Picker.

Is it possible to implement such a behaviour for Telerik Kendo UI Date Picker?

If yes, how would I do something like that?

Best regards

M

[Hetali]

Hi Manuel,

Thank for sharing the sample.

In order to achieve the desired calendar, I recommend using the Kendo UI DateRange component. The DateRange popup utilizes the MultiViewCalendar component to pick a range but it can be modified or replaced using the DateRangePopupTemplateDirective. To add the predefined range column, you can use the Kendo UI Drawer component and apply the ranges using the select event. 

Step-by-step guide to replicate the sample DateRange component.

1. Define the DateRange component

<kendo-daterange>
  <kendo-floatinglabel text="Start">
    <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
  </kendo-floatinglabel>
  <kendo-floatinglabel text="End">
    <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
  </kendo-floatinglabel>
</kendo-daterange>

2. Add the DateRangePopup component and define it's template

<kendo-daterange>
...
  <kendo-daterange-popup>
    <ng-template kendoDateRangePopupTemplate>
      <kendo-drawer-container>
        <kendo-drawer #drawer
          [items]="items"
          mode="push"
          [mini]="false"
          [expanded]="true"
          [autoCollapse]="false"
          (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>

3. Write the select event function

public onSelect(e: DrawerSelectEvent): void {
  switch (e.index) {
    case 0: {
      this.range = {     
        start: new Date(), 
        end: new Date() 
      };
      break;
    }
    ...
    default: {
      this.range = { 
        start: null, 
        end: null 
      };
      break;
    }
  }
}

 

I have created this StackBlitz example demonstrating the steps discussed above that replicates the sample image shared.

I hope this helps you achieve the desired date range. Please let me know if you have any further questions regarding the Drawer in the DateRange component.

Regards,
Hetali
Progress Telerik