feat(dateRange): Adding PredefinedRangesArea and updating samples

Ivan Kitanov · Ivan Kitanov · commit 94ea035b99f5 · 2025-08-06T18:26:49.000+03:00
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsBG = {
     igx_date_range_picker_date_separator: 'до',
-    igx_date_range_picker_done_button: 'Завърши'
+    igx_date_range_picker_done_button: 'Завърши',
+    igx_date_range_picker_last7Days: 'Последните 7 дни',
+    igx_date_range_picker_currentMonth: 'Текущ месец',
+    igx_date_range_picker_last30Days: 'Последните 30 дни',
+    igx_date_range_picker_yearToDate: 'От началото на годината'
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsCS = {
     igx_date_range_picker_date_separator: 'na',
-    igx_date_range_picker_done_button: 'Hotovo'
+    igx_date_range_picker_done_button: 'Hotovo',
+    igx_date_range_picker_last7Days: 'Posledních 7 dní',
+    igx_date_range_picker_currentMonth: 'Tento měsíc',
+    igx_date_range_picker_last30Days: 'Posledních 30 dní',
+    igx_date_range_picker_yearToDate: 'Od začátku roku',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsDA = {
     igx_date_range_picker_date_separator: 'till',
-    igx_date_range_picker_done_button: 'Færdigt'
+    igx_date_range_picker_done_button: 'Færdigt',
+    igx_date_range_picker_last7Days: 'Sidste 7 dage',
+    igx_date_range_picker_currentMonth: 'Denne måned',
+    igx_date_range_picker_last30Days: 'Sidste 30 dage',
+    igx_date_range_picker_yearToDate: 'Året til dato',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsDE = {
     igx_date_range_picker_date_separator: 'bis',
-    igx_date_range_picker_done_button: 'Fertig'
+    igx_date_range_picker_done_button: 'Fertig',
+    igx_date_range_picker_last7Days: 'Letzte 7 Tage',
+    igx_date_range_picker_currentMonth: 'Aktueller Monat',
+    igx_date_range_picker_last30Days: 'Letzte 30 Tage',
+    igx_date_range_picker_yearToDate: 'Jahr bis heute',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsES = {
     igx_date_range_picker_date_separator: 'a',
-    igx_date_range_picker_done_button: 'Listo'
+    igx_date_range_picker_done_button: 'Listo',
+    igx_date_range_picker_last7Days: 'Últimos 7 días',
+    igx_date_range_picker_currentMonth: 'Mes actual',
+    igx_date_range_picker_last30Days: 'Últimos 30 días',
+    igx_date_range_picker_yearToDate: 'Año hasta la fecha',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsFR = {
     igx_date_range_picker_date_separator: 'à',
-    igx_date_range_picker_done_button: 'Terminée'
+    igx_date_range_picker_done_button: 'Terminée',
+    igx_date_range_picker_last7Days: '7 derniers jours',
+    igx_date_range_picker_currentMonth: 'Mois en cours',
+    igx_date_range_picker_last30Days: '30 derniers jours',
+    igx_date_range_picker_yearToDate: 'Année à ce jour',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsHU = {
     igx_date_range_picker_date_separator: '-',
-    igx_date_range_picker_done_button: 'Kész'
+    igx_date_range_picker_done_button: 'Kész',
+    igx_date_range_picker_last7Days: 'Az elmúlt 7 nap',
+    igx_date_range_picker_currentMonth: 'Aktuális hónap',
+    igx_date_range_picker_last30Days: 'Az elmúlt 30 nap',
+    igx_date_range_picker_yearToDate: 'Év elejétől napjainkig',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsIT = {
     igx_date_range_picker_date_separator: 'a',
-    igx_date_range_picker_done_button: 'Fine'
+    igx_date_range_picker_done_button: 'Fine',
+    igx_date_range_picker_last7Days: 'Ultimi 7 giorni',
+    igx_date_range_picker_currentMonth: 'Mese corrente',
+    igx_date_range_picker_last30Days: 'Ultimi 30 giorni',
+    igx_date_range_picker_yearToDate: 'Anno fino ad oggi',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsJA = {
     igx_date_range_picker_date_separator: '～',
-    igx_date_range_picker_done_button: '完了'
+    igx_date_range_picker_done_button: '完了',
+    igx_date_range_picker_last7Days: '過去7日間',
+    igx_date_range_picker_currentMonth: '今月',
+    igx_date_range_picker_last30Days: '過去30日間',
+    igx_date_range_picker_yearToDate: '年初来',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsKO = {
     igx_date_range_picker_date_separator: '에',
-    igx_date_range_picker_done_button: '완료'
+    igx_date_range_picker_done_button: '완료',
+    igx_date_range_picker_last7Days: '지난 7일',
+    igx_date_range_picker_currentMonth: '이번 달',
+    igx_date_range_picker_last30Days: '지난 30일',
+    igx_date_range_picker_yearToDate: '올해 초부터 현재까지',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsNB = {
     igx_date_range_picker_date_separator: 'til',
-    igx_date_range_picker_done_button: 'Ferdig'
+    igx_date_range_picker_done_button: 'Ferdig',
+    igx_date_range_picker_last7Days: 'Siste 7 dager',
+    igx_date_range_picker_currentMonth: 'Denne måneden',
+    igx_date_range_picker_last30Days: 'Siste 30 dager',
+    igx_date_range_picker_yearToDate: 'Året til dato',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsNL = {
     igx_date_range_picker_date_separator: 'tot',
-    igx_date_range_picker_done_button: 'Gereed'
+    igx_date_range_picker_done_button: 'Gereed',
+    igx_date_range_picker_last7Days: 'Laatste 7 dagen',
+    igx_date_range_picker_currentMonth: 'Huidige maand',
+    igx_date_range_picker_last30Days: 'Laatste 30 dagen',
+    igx_date_range_picker_yearToDate: 'Jaar tot datum',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsPL = {
     igx_date_range_picker_date_separator: 'do',
-    igx_date_range_picker_done_button: 'Gotowe'
+    igx_date_range_picker_done_button: 'Gotowe',
+    igx_date_range_picker_last7Days: 'Ostatnie 7 dni',
+    igx_date_range_picker_currentMonth: 'Bieżący miesiąc',
+    igx_date_range_picker_last30Days: 'Ostatnie 30 dni',
+    igx_date_range_picker_yearToDate: 'Od początku roku',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsPT = {
     igx_date_range_picker_date_separator: 'para',
-    igx_date_range_picker_done_button: 'Concluído'
+    igx_date_range_picker_done_button: 'Concluído',
+    igx_date_range_picker_last7Days: 'Últimos 7 dias',
+    igx_date_range_picker_currentMonth: 'Mês atual',
+    igx_date_range_picker_last30Days: 'Últimos 30 dias',
+    igx_date_range_picker_yearToDate: 'Ano até hoje',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsRO = {
     igx_date_range_picker_date_separator: 'la',
-    igx_date_range_picker_done_button: 'Gata'
+    igx_date_range_picker_done_button: 'Gata',
+    igx_date_range_picker_last7Days: 'Ultimele 7 zile',
+    igx_date_range_picker_currentMonth: 'Luna curentă',
+    igx_date_range_picker_last30Days: 'Ultimele 30 de zile',
+    igx_date_range_picker_yearToDate: 'De la începutul anului',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsSV = {
     igx_date_range_picker_date_separator: 'till',
-    igx_date_range_picker_done_button: 'Färdig'
+    igx_date_range_picker_done_button: 'Färdig',
+    igx_date_range_picker_last7Days: 'Senaste 7 dagarna',
+    igx_date_range_picker_currentMonth: 'Aktuell månad',
+    igx_date_range_picker_last30Days: 'Senaste 30 dagarna',
+    igx_date_range_picker_yearToDate: 'Året hittills',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsTR = {
     igx_date_range_picker_date_separator: '-',
-    igx_date_range_picker_done_button: 'Bitti'
+    igx_date_range_picker_done_button: 'Bitti',
+    igx_date_range_picker_last7Days: 'Son 7 gün',
+    igx_date_range_picker_currentMonth: 'Geçerli ay',
+    igx_date_range_picker_last30Days: 'Son 30 gün',
+    igx_date_range_picker_yearToDate: 'Yılbaşı itibarıyla',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsZHHANS = {
     igx_date_range_picker_date_separator: '至',
-    igx_date_range_picker_done_button: '完成'
+    igx_date_range_picker_done_button: '完成',
+    igx_date_range_picker_last7Days: '最近7天',
+    igx_date_range_picker_currentMonth: '本月',
+    igx_date_range_picker_last30Days: '最近30天',
+    igx_date_range_picker_yearToDate: '年初至今',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/date-range-picker-resources.ts
@@ -6,5 +6,9 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsZHHANT = {
     igx_date_range_picker_date_separator: '到',
-    igx_date_range_picker_done_button: '完成'
+    igx_date_range_picker_done_button: '完成',
+    igx_date_range_picker_last7Days: '最近7天',
+    igx_date_range_picker_currentMonth: '本月',
+    igx_date_range_picker_last30Days: '最近30天',
+    igx_date_range_picker_yearToDate: '年初至今',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts
@@ -1,9 +1,18 @@
 export interface IDateRangePickerResourceStrings {
     igx_date_range_picker_date_separator?: string;
     igx_date_range_picker_done_button?: string;
+    igx_date_range_picker_last7Days?: string;
+    igx_date_range_picker_currentMonth?: string;
+    igx_date_range_picker_last30Days?: string;
+    igx_date_range_picker_yearToDate?: string;
 }
 
 export const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings = {
     igx_date_range_picker_date_separator: 'to',
-    igx_date_range_picker_done_button: 'Done'
+    igx_date_range_picker_done_button: 'Done',
+    igx_date_range_picker_last7Days: 'Last 7 Days',
+    igx_date_range_picker_currentMonth: 'Current Month',
+    igx_date_range_picker_last30Days: 'Last 30 Days',
+    igx_date_range_picker_yearToDate: 'Year to Date',
+
 };
diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html
@@ -28,6 +28,15 @@
 </ng-template>
 
 <igx-calendar></igx-calendar>
+
+ @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){
+        <igx-predefined-ranges-area
+            [usePredefinedRanges]="usePredefinedRanges"
+            [customRanges]="customRanges"
+            [resourceStrings]="resourceStrings"
+            (rangeSelect)="rangeSelected.emit($event)">
+        </igx-predefined-ranges-area>
+    }
 @if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {
     <igx-divider></igx-divider>
 }
diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts
@@ -13,6 +13,9 @@ import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
 import { IgxPickerActionsDirective } from '../picker-icons.common';
 import { IgxCalendarComponent } from '../../calendar/calendar.component';
 import { IgxDividerDirective } from "../../directives/divider/divider.directive";
+import { CustomDateRange, DateRange } from '../../date-range-picker/date-range-picker-inputs.common';
+import { IDateRangePickerResourceStrings } from '../../core/i18n/date-range-picker-resources';
+import { IgxPredefinedRangesAreaComponent } from '../../date-range-picker/predefined-ranges/predefined-ranges-area.component';
 
 /** @hidden */
 @Component({
@@ -25,6 +28,7 @@ import { IgxDividerDirective } from "../../directives/divider/divider.directive"
         IgxCalendarComponent,
         NgTemplateOutlet,
         IgxDividerDirective,
+        IgxPredefinedRangesAreaComponent
     ]
 })
 export class IgxCalendarContainerComponent {
@@ -37,6 +41,10 @@ export class IgxCalendarContainerComponent {
     @Output()
     public todaySelection = new EventEmitter<IBaseEventArgs>();
 
+    @Output()
+    public rangeSelected = new EventEmitter<DateRange>();
+
+
     @HostBinding('class.igx-date-picker')
     public styleClass = 'igx-date-picker';
 
@@ -45,6 +53,9 @@ export class IgxCalendarContainerComponent {
         return this.mode === PickerInteractionMode.DropDown;
     }
 
+    public usePredefinedRanges = false;
+    public customRanges: CustomDateRange[] = [];
+    public resourceStrings!: IDateRangePickerResourceStrings;
     public vertical = false;
     public closeButtonLabel: string;
     public todayButtonLabel: string;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts
@@ -17,6 +17,11 @@ export interface DateRange {
     start: Date | string;
     end: Date | string;
 }
+/** Represents a range between two dates and a label used for predefined and custom date ranges. */
+export interface CustomDateRange {
+    label: string;
+    dateRange: DateRange;
+}
 
 /** @hidden @internal */
 @Pipe({
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -30,7 +30,7 @@ import {
     AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs,
     OverlaySettings, PositionSettings
 } from '../services/public_api';
-import { DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, DateRangePickerFormatPipe } from './date-range-picker-inputs.common';
+import { DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, DateRangePickerFormatPipe, CustomDateRange } from './date-range-picker-inputs.common';
 import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
@@ -283,6 +283,27 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * <igx-date-range-picker [(value)]="date"></igx-date-range-picker>
      * ```
      */
+
+     /**
+      * Whether to render built-in predefined ranges.
+      *
+      * @example
+      * ```html
+      * <igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
+      * ``
+      *  */
+    @Input() public usePredefinedRanges = false;
+
+    /**
+     *  Custom ranges rendered as chips.
+     *
+     * @example
+     * ```html
+     * <igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
+     * ``
+    */
+    @Input() public customRanges: CustomDateRange[] = [];
+
     @Output()
     public valueChange = new EventEmitter<DateRange>();
 
@@ -1092,6 +1113,20 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
         componentInstance.pickerActions = this.pickerActions;
+        componentInstance.usePredefinedRanges = this.usePredefinedRanges;
+        componentInstance.customRanges = this.customRanges;
+        componentInstance.resourceStrings = this.resourceStrings;
         componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close());
+        componentInstance.rangeSelected
+        .pipe(takeUntil(this._destroy$))
+        .subscribe((r: DateRange) => {
+            if (r?.start && r?.end) {
+            this.select(new Date(r.start), new Date(r.end));
+            }
+
+            if (this.isDropdown) {
+            this.close();
+            }
+        });
     }
 }
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.html b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.html
@@ -0,0 +1,7 @@
+<div class="igx-predefined-ranges" role="group" aria-label="Predefined ranges">
+  @for (r of ranges; track r.label) {
+    <igx-chip (click)="onSelect(r.dateRange)">
+      {{ r.label }}
+    </igx-chip>
+  }
+</div>
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts
diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
