feat(dateRange): Add cancel button in dialog mode

IvanKitanov17 · IvanKitanov17 · commit 8c361062b94c · 2025-08-01T16:09:52.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,6 @@ 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_cancel_button: 'Отмени'
 } 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,6 @@ 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_cancel_button: 'Zrušit'
 } 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,6 @@ 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_cancel_button: 'Annuller'
 } 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,6 @@ 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_cancel_button: 'Abbrechen'
 } 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,6 @@ 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_cancel_button: 'Cancelar'
 } 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,6 @@ 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_cancel_button: 'Annuler'
 } 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,6 @@ 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_cancel_button: 'Mégse'
 } 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,6 @@ 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_cancel_button: 'Annulla'
 } 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,6 @@ 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_cancel_button: 'キャンセル'
 } 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,6 @@ 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_cancel_button: '취소'
 } 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,6 @@ 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_cancel_button: 'Avbryt'
 } 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,6 @@ 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_cancel_button: 'Annuleren'
 } 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,6 @@ 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_cancel_button: 'Anuluj'
 } 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,6 @@ 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_cancel_button: 'Cancelar'
 } 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,6 @@ 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_cancel_button: 'Anulează'
 } 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,6 @@ 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_cancel_button: 'Avbryt'
 } 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,6 @@ 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_cancel_button: 'İptal'
 } 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,6 @@ 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_cancel_button: '取消'
 } 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,6 @@ 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_cancel_button: '取消'
 } 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,11 @@
 export interface IDateRangePickerResourceStrings {
     igx_date_range_picker_date_separator?: string;
     igx_date_range_picker_done_button?: string;
-}
+    igx_date_range_picker_cancel_button?: 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_cancel_button: 'Cancel'
 };
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
@@ -1,17 +1,26 @@
 <ng-template #defaultPickerActions>
-    @if (closeButtonLabel || todayButtonLabel) {
+    @if (closeButtonLabel || cancelButtonLabel || todayButtonLabel) {
         <div class="igx-date-picker__buttons">
             @if (closeButtonLabel) {
                 <button
                     #closeButton
                     type="button"
                     igxButton="flat"
                     igxRipple
-                    (click)="calendarClose.emit({ owner: this })"
+                    (click)="calendarClose.emit({ owner: this})"
                 >
                     {{ closeButtonLabel }}
                 </button>
             }
+            @if (cancelButtonLabel) {
+            <button
+            #cancelButton type="button"
+            igxButton="flat" igxRipple
+            (click)="calendarCancel.emit({ owner: this})"
+            >
+                {{ cancelButtonLabel }}
+            </button>
+            }
             @if (todayButtonLabel) {
                 <button
                     #todayButton
@@ -28,10 +37,10 @@
 </ng-template>
 
 <igx-calendar></igx-calendar>
-@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {
+@if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {
     <igx-divider></igx-divider>
 }
-@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {
+@if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {
     <div class="igx-date-picker__actions">
         <ng-container
             *ngTemplateOutlet="
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
@@ -34,6 +34,9 @@ export class IgxCalendarContainerComponent {
     @Output()
     public calendarClose = new EventEmitter<IBaseEventArgs>();
 
+    @Output()
+    public calendarCancel = new EventEmitter<IBaseEventArgs>();
+
     @Output()
     public todaySelection = new EventEmitter<IBaseEventArgs>();
 
@@ -47,6 +50,7 @@ export class IgxCalendarContainerComponent {
 
     public vertical = false;
     public closeButtonLabel: string;
+    public cancelButtonLabel: string;
     public todayButtonLabel: string;
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
     public pickerActions: IgxPickerActionsDirective;
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
@@ -38,7 +38,7 @@ const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
 const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
 const CSS_CLASS_CALENDAR = 'igx-calendar';
 const CSS_CLASS_ICON = 'igx-icon';
-const CSS_CLASS_DONE_BUTTON = 'igx-button--flat';
+const CSS_CLASS_DIALOG_BUTTON = 'igx-button--flat';
 const CSS_CLASS_LABEL = 'igx-input-group__label';
 const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 const CSS_CLASS_DATE_RANGE = 'igx-date-range-picker';
@@ -280,7 +280,7 @@ describe('IgxDateRangePicker', () => {
         let calendar: DebugElement | Element;
         let calendarDays: DebugElement[] | HTMLCollectionOf<Element>;
 
-        const selectDateRangeFromCalendar = (sDate: Date, eDate: Date) => {
+        const selectDateRangeFromCalendar = (sDate: Date, eDate: Date, autoClose:boolean = true) => {
             dateRange.open();
             fixture.detectChanges();
             calendarDays = document.getElementsByClassName(CSS_CLASS_CALENDAR_DATE);
@@ -300,9 +300,13 @@ describe('IgxDateRangePicker', () => {
             if (endIndex !== -1 && endIndex !== startIndex) { // do not click same date twice
                 UIInteractions.simulateClickAndSelectEvent(calendarDays[endIndex].firstChild as HTMLElement);
             }
+
             fixture.detectChanges();
-            dateRange.close();
-            fixture.detectChanges();
+
+            if (autoClose){
+                dateRange.close();
+                fixture.detectChanges();
+            }
         };
 
         describe('Single Input', () => {
@@ -484,7 +488,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
 
-                    const doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
+                    const doneBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[0];
                     UIInteractions.simulateClickAndSelectEvent(doneBtn);
                     tick();
                     fixture.detectChanges();
@@ -496,14 +500,46 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.closed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));
 
-                it('should show the "Done" button only in dialog mode', fakeAsync(() => {
+                it('should close the calendar with the "Cancel" button and retain original value', fakeAsync(() => {
+                    fixture.componentInstance.mode = PickerInteractionMode.Dialog;
+                    const orig = { start: new Date(2020, 0, 1), end: new Date(2020, 0, 5) };
+                    fixture.componentInstance.dateRange.value = orig;
+                    fixture.detectChanges();
+
+                    spyOn(dateRange.closing, 'emit').and.callThrough();
+                    spyOn(dateRange.closed, 'emit').and.callThrough();
+
+                    dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                    expect(dateRange.collapsed).toBeFalsy();
+
+                    selectDateRangeFromCalendar(new Date(2020, 0, 8), new Date(2020, 0, 12), false);
+
+                    const cancelBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[1];
+                    UIInteractions.simulateClickAndSelectEvent(cancelBtn);
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(dateRange.collapsed).toBeTrue();
+                    expect(dateRange.closing.emit).toHaveBeenCalledTimes(1);
+                    expect(dateRange.closing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
+                    expect(dateRange.closed.emit).toHaveBeenCalledTimes(1);
+                    expect(dateRange.closed.emit).toHaveBeenCalledWith({ owner: dateRange });
+
+                    expect(fixture.componentInstance.dateRange.value).toEqual(orig);
+                }));
+
+                it('should show the "Done" and "Cancel" buttons only in dialog mode', fakeAsync(() => {
                     fixture.componentInstance.mode = PickerInteractionMode.Dialog;
                     fixture.detectChanges();
 
                     dateRange.open();
                     fixture.detectChanges();
-                    let doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
+                    let doneBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[0];
+                    let cancelBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[1];
                     expect(doneBtn).not.toBe(null);
+                    expect(cancelBtn).not.toBe(null);
                     dateRange.close();
                     tick();
                     fixture.detectChanges();
@@ -514,8 +550,10 @@ describe('IgxDateRangePicker', () => {
                     dateRange.open();
                     tick();
                     fixture.detectChanges();
-                    doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
+                    doneBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[0];
+                    cancelBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[1];
                     expect(doneBtn).not.toBeDefined();
+                    expect(cancelBtn).not.toBeDefined();
                 }));
 
                 it('should be able to change the "Done" button text', fakeAsync(() => {
@@ -524,19 +562,24 @@ describe('IgxDateRangePicker', () => {
 
                     dateRange.toggle();
                     fixture.detectChanges();
-                    let doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
+                    let doneBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[0];
+                    let cancelBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[1];
                     expect(doneBtn.textContent.trim()).toEqual('Done');
+                    expect(cancelBtn.textContent.trim()).toEqual('Cancel');
                     dateRange.toggle();
                     tick();
                     fixture.detectChanges();
 
                     dateRange.doneButtonText = 'Close';
+                    dateRange.cancelButtonText = 'Discard'
                     fixture.detectChanges();
                     dateRange.toggle();
                     tick();
                     fixture.detectChanges();
-                    doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
+                    doneBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[0];
+                    cancelBtn = document.getElementsByClassName(CSS_CLASS_DIALOG_BUTTON)[1];
                     expect(doneBtn.textContent.trim()).toEqual('Close');
+                    console.log(cancelBtn.textContent.trim());
                 }));
 
                 it('should emit open/close events - open/close methods', fakeAsync(() => {
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
