Merge pull request #3718 from IgniteUI/bpachilova/drp-samples-update-6189

feat(drp): update custom actions sample with predefined ranges

Author: kacheshmarova

src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.scss

@@ -2,4 +2,5 @@
     display: block;
     padding: 1rem;
     max-width: 600px;
+    --ig-size: var(--ig-size-small);
 }

src/app/scheduling/daterangepicker/daterangepicker-range-buttons/daterangepicker-range-buttons.html

@@ -1,11 +1,9 @@
 <igx-date-range-picker #rangePicker [mode]="'dialog'" [(ngModel)]="range"
+    [usePredefinedRanges]="true" [customRanges]="customRanges"
     [overlaySettings]="overlaySettings">
     <ng-template igxPickerActions>
         <div id="actions">
-            <button igxButton (click)="selectDays(7)">Last 7 days</button>
-            <button igxButton (click)="selectDays(28)">Last 28 days</button>
-            <button igxButton (click)="selectDays(90)">Last 90 days</button>
-            <button igxButton (click)="rangePicker.close()">Done</button>
+            <button igxButton (click)="rangePicker.close()">Save</button>
         </div>
     </ng-template>
 </igx-date-range-picker>

src/app/scheduling/daterangepicker/daterangepicker-range-buttons/daterangepicker-range-buttons.scss

@@ -2,27 +2,5 @@
     display: block;
     padding: 1rem;
     max-width: 600px;
-  
-    ::ng-deep {
-      igx-calendar-container {
-        display: flex;
-        flex-direction: row-reverse;
-      }
-  
-      #actions {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        margin: 0 10px;
-  
-        button {
-          margin: 6px 0;
-        }
-
-        button:last-of-type {
-            margin: 24px 0 18px 0;
-        }
-      }
-    }
+    --ig-size: var(--ig-size-small);
   }
-  

src/app/scheduling/daterangepicker/daterangepicker-range-buttons/daterangepicker-range-buttons.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { DateRange, IgxDateRangePickerComponent, OverlaySettings, IgxPickerActionsDirective, IgxButtonDirective } from 'igniteui-angular';
+import { DateRange, IgxDateRangePickerComponent, OverlaySettings, IgxPickerActionsDirective, IgxButtonDirective, IChangeCheckboxEventArgs, CustomDateRange } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
 
 @Component({
@@ -19,16 +19,26 @@ export class DateRangePickerRangeButtonsComponent {
         end: new Date(new Date().setDate(new Date().getDate() + 2))
     };
 
+    public today = new Date();
+
+    public nextSeven = new Date(
+      this.today.getFullYear(),
+      this.today.getMonth(),
+      this.today.getDate() + 7
+    );
+
+    public customRanges: CustomDateRange[] = [
+      {
+        label: 'Next 7 days',
+        dateRange: {
+          start: this.today,
+          end: this.nextSeven
+        }
+      }
+    ];
+
     public overlaySettings: OverlaySettings = {
         outlet: this.element,
         modal: true
     };
-
-    public selectDays(count: number) {
-        const today: Date = new Date();
-        this.range = {
-            start: new Date(new Date().setDate(today.getDate() - count + 1)),
-            end: today
-        };
-    }
 }