Skip to content

DateRangePicker - Add cancel button in dialog mode #16109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

DateRangePicker - Add cancel button in dialog mode #16109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c36106
feat(dateRange): Add cancel button in dialog mode
IvanKitanov17 Aug 1, 2025
10287a9
Merge branch 'master' into ikitanov/fix-16091
ChronosSF Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/IT/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/JA/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/KO/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/NB/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/NL/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/PL/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/PT/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/RO/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/SV/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/TR/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/ZH-HANS/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
3 changes: 2 additions & 1 deletion projects/igniteui-angular-i18n/src/i18n/ZH-HANT/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
6 changes: 4 additions & 2 deletions projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
};
17 changes: 13 additions & 4 deletions ...igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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="
Expand Down
4 changes: 4 additions & 0 deletions ...s/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();

Expand All @@ -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;
Expand Down
63 changes: 53 additions & 10 deletions projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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(() => {
Expand All @@ -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(() => {
Expand Down
Loading
Loading