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
index 654c8557353..7a7392c63d9 100644
--- 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
index 8095dde0e71..56d2a9d9680 100644
--- 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
index 6d9ee56c3bb..77026c0b5f4 100644
--- 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
index f9483f2d0c9..b24aef2695f 100644
--- 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
index a7367bbb588..8fcd35b01d4 100644
--- 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
index 4a9dc66a55e..de180867f6e 100644
--- 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
index e71b93c5a09..e18f8342235 100644
--- 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
index a67887a21da..9c2e20f4162 100644
--- 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
index b2af1024ca0..0de6a121152 100644
--- 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
index def99afdc7f..4185ae1a48d 100644
--- 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
index e36e6959f84..600cce3043f 100644
--- 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
index 31ada214108..3925042ae9e 100644
--- 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
index 41c9240ea27..c83ba31a576 100644
--- 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
index 6fdc9d0a1aa..6ac2462cfde 100644
--- 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
index a09900d3814..d2a7193e250 100644
--- 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
index d77a61d3077..ae610b3c8ef 100644
--- 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
index 1615b8d100c..cca2c19c325 100644
--- 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
index 8a5cf97d998..74cc4f2662c 100644
--- 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
index 1095f5a3e5e..978c30e1567 100644
--- 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
index 3b0d2729e02..6d2d2ea5c45 100644
--- 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
index 0d54b8105b3..3bb6f296586 100644
--- 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,5 +1,5 @@
 <ng-template #defaultPickerActions>
-    @if (closeButtonLabel || todayButtonLabel) {
+    @if (closeButtonLabel || cancelButtonLabel || todayButtonLabel) {
         <div class="igx-date-picker__buttons">
             @if (closeButtonLabel) {
                 <button
@@ -7,11 +7,20 @@
                     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
index 510be7214f1..9d241d2c7f3 100644
--- 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
index 01d03dc791d..9173ad03947 100644
--- 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
index e6b5edca0ba..d0f0e2a45e2 100644
--- 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
@@ -149,6 +149,29 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         }
         return this._doneButtonText;
     }
+    /**
+     * Overrides the default text of the calendar dialog **Cancel** button.
+     *
+     * @remarks
+     * Defaults to the value from resource strings, `"Cancel"` for the built-in EN.
+     * The button will only show up in `dialog` mode.
+     *
+     * @example
+     * ```html
+     * <igx-date-range-picker cancelButtonText="取消"></igx-date-range-picker>
+     * ```
+     */
+    @Input()
+    public set cancelButtonText(value: string) {
+        this._cancelButtonText = value;
+    }
+
+    public get cancelButtonText(): string {
+        if (this._cancelButtonText === null) {
+            return this.resourceStrings.igx_date_range_picker_cancel_button;
+        }
+        return this._cancelButtonText;
+    }
     /**
      * Custom overlay settings that should be used to display the calendar.
      *
@@ -439,8 +462,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     private _resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN);
     private _doneButtonText = null;
+    private _cancelButtonText = null;
     private _dateSeparator = null;
     private _value: DateRange | null;
+    private _originalValue: DateRange | null;
     private _overlayId: string;
     private _ngControl: NgControl;
     private _statusChanges$: Subscription;
@@ -511,6 +536,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             return;
         }
 
+        this._originalValue = this._value
+            ? { start: new Date(this._value.start), end: new Date(this._value.end) }
+            : null;
+
         const settings = Object.assign({}, this.isDropdown
             ? this.dropdownOverlaySettings
             : this.dialogOverlaySettings
@@ -1091,7 +1120,12 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
+        componentInstance.cancelButtonLabel = !this.isDropdown ? this.cancelButtonText : null;
         componentInstance.pickerActions = this.pickerActions;
         componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close());
+        componentInstance.calendarCancel.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this._value = this._originalValue;
+            this.close()
+        });
     }
 }