Merge pull request #16121 from IgniteUI/ikitanov/fix-16088

kacheshmarova · web-flow · commit b781018fb86e · 2025-08-20T15:04:47.000+03:00
Adding PredefinedRangesArea
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 20.1.0
 ### New Features
 - `IgxCarousel`
@@ -10,6 +11,15 @@ All notable changes for each version of this project will be documented in this
     this.carousel.select(2, Direction.NEXT);
     ```
 
+- `IgxDateRangePicker`
+  - Added new properties:
+      - `usePredefinedRanges` - Whether to render built-in predefined ranges 
+      - `customRanges` - Allows the user to provide custom ranges rendered as chips
+      - `resourceStrings` - Allows the user to provide set of resource strings 
+        
+- `IgxPredefinedRangesAreaComponent`
+  - Added new component for rendering the predefined or custom ranges inside the calendar of the `IgxDateRangePicker`
+
 - `IgxOverlay`
     - Position Settings now accept a new optional `offset` input property of type `number`. Used to set the offset of the element from the target in pixels.
 
@@ -18,6 +28,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxTooltipTarget`
     - Introduced several new properties to enhance customization of tooltip content and behavior. Those include `positionSettings`, `hasArrow`, `sticky`, `closeButtonTemplate`. For detailed usage and examples, please refer to the Tooltip [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md).
 
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
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.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
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
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
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
