Skip to content

Commit df36861

Browse files
ddariboddaribo
committed
feat(drp): use templates for calendar header parts as DP + test
1 parent dd5ba17 commit df36861

File tree

3 files changed

+87
-5
lines changed

3 files changed

+87
-5
lines changed

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { DateRangeType } from '../core/dates';
1515
import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
1616
import { AutoPositionStrategy, IgxOverlayService } from '../services/public_api';
1717
import { AnimationMetadata, AnimationOptions } from '@angular/animations';
18-
import { IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api';
18+
import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective, WEEKDAYS } from '../calendar/public_api';
1919
import { Subject } from 'rxjs';
2020
import { AsyncPipe } from '@angular/common';
2121
import { AnimationService } from '../services/animation/animation';
@@ -44,6 +44,9 @@ const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
4444
const CSS_CLASS_DATE_RANGE = 'igx-date-range-picker';
4545
const CSS_CLASS_CALENDAR_DATE = 'igx-days-view__date';
4646
const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive';
47+
const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header-date';
48+
const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
49+
const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
4750

4851
describe('IgxDateRangePicker', () => {
4952
describe('Unit tests: ', () => {
@@ -1562,6 +1565,62 @@ describe('IgxDateRangePicker', () => {
15621565
expect(dateRange.locale).toEqual('en-US');
15631566
expect(dateRange.weekStart).toEqual(WEEKDAYS.FRIDAY);
15641567
}));
1568+
1569+
it('Should render calendar with header in dialog mode by default', fakeAsync(() => {
1570+
fixture = TestBed.createComponent(DateRangeDefaultComponent);
1571+
fixture.detectChanges();
1572+
dateRange = fixture.componentInstance.dateRange;
1573+
dateRange.mode = 'dialog';
1574+
dateRange.open();
1575+
tick();
1576+
fixture.detectChanges();
1577+
1578+
expect(dateRange['_calendar'].hasHeader).toBeTrue();
1579+
const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
1580+
expect(calendarHeader).toBeTruthy('Calendar header should be present');
1581+
}));
1582+
1583+
describe('Templated Calendar Header', () => {
1584+
let dateRangeDebugEl: DebugElement;
1585+
beforeEach(fakeAsync(() => {
1586+
TestBed.configureTestingModule({
1587+
imports: [DateRangeTemplatesComponent]
1588+
}).compileComponents();
1589+
1590+
fixture = TestBed.createComponent(DateRangeTemplatesComponent);
1591+
fixture.detectChanges();
1592+
dateRangeDebugEl = fixture.debugElement.queryAll(By.directive(IgxDateRangePickerComponent))[0];
1593+
dateRange = dateRangeDebugEl.componentInstance;
1594+
dateRange.mode = 'dialog';
1595+
dateRange.open();
1596+
tick();
1597+
fixture.detectChanges();
1598+
}));
1599+
1600+
it('Should use the custom template for header title', fakeAsync(() => {
1601+
const headerTitleElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER_TITLE));
1602+
expect(headerTitleElement).toBeTruthy('Header title element should be present');
1603+
if (headerTitleElement) {
1604+
expect(headerTitleElement.nativeElement.textContent.trim()).toBe('Test header title');
1605+
}
1606+
}));
1607+
1608+
it('Should use the custom template for header', fakeAsync(() => {
1609+
const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER));
1610+
expect(headerElement).toBeTruthy('Header element should be present');
1611+
if (headerElement) {
1612+
expect(headerElement.nativeElement.textContent.trim()).toBe('Test header');
1613+
}
1614+
}));
1615+
1616+
it('Should use the custom template for subheader', fakeAsync(() => {
1617+
const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_SUBHEADER));
1618+
expect(headerElement).toBeTruthy('Subheader element should be present');
1619+
if (headerElement) {
1620+
expect(headerElement.nativeElement.textContent.trim()).toBe('Test subheader');
1621+
}
1622+
}));
1623+
});
15651624
});
15661625
});
15671626
});
@@ -1684,6 +1743,9 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
16841743
<igx-picker-toggle igxPrefix>
16851744
<igx-icon>flight_takeoff</igx-icon>
16861745
</igx-picker-toggle>
1746+
<ng-template igxCalendarHeader let-formatCalendar>Test header</ng-template>
1747+
<ng-template igxCalendarHeaderTitle let-formatCalendar>Test header title</ng-template>
1748+
<ng-template igxCalendarSubheader let-formatCalendar>Test subheader</ng-template>
16871749
</igx-date-range-picker>
16881750
<igx-date-range-picker #suffixSingleRange>
16891751
<igx-picker-toggle igxSuffix>
@@ -1727,7 +1789,10 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
17271789
IgxInputDirective,
17281790
IgxDateTimeEditorDirective,
17291791
IgxPrefixDirective,
1730-
IgxSuffixDirective
1792+
IgxSuffixDirective,
1793+
IgxCalendarHeaderTemplateDirective,
1794+
IgxCalendarHeaderTitleTemplateDirective,
1795+
IgxCalendarSubheaderTemplateDirective
17311796
]
17321797
})
17331798
export class DateRangeTemplatesComponent extends DateRangeTestComponent {

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import { fromEvent, merge, MonoTypeOperatorFunction, noop, Subscription } from 'rxjs';
1414
import { filter, takeUntil } from 'rxjs/operators';
1515

16-
import { CalendarSelection, IgxCalendarComponent } from '../calendar/public_api';
16+
import { CalendarSelection, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/public_api';
1717
import { DateRangeType } from '../core/dates';
1818
import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from '../core/i18n/date-range-picker-resources';
1919
import { IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
@@ -311,6 +311,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
311311
@ContentChild(IgxDateRangeSeparatorDirective, { read: TemplateRef })
312312
public dateSeparatorTemplate: TemplateRef<any>;
313313

314+
315+
@ContentChild(IgxCalendarHeaderTitleTemplateDirective)
316+
private headerTitleTemplate: IgxCalendarHeaderTitleTemplateDirective;
317+
318+
@ContentChild(IgxCalendarHeaderTemplateDirective)
319+
private headerTemplate: IgxCalendarHeaderTemplateDirective;
320+
321+
@ContentChild(IgxCalendarSubheaderTemplateDirective)
322+
private subheaderTemplate: IgxCalendarSubheaderTemplateDirective;
323+
314324
/** @hidden @internal */
315325
public get dateSeparator(): string {
316326
if (this._dateSeparator === null) {
@@ -1080,13 +1090,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
10801090

10811091
private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
10821092
this._calendar = componentInstance.calendar;
1083-
this.calendar.hasHeader = false;
1093+
this.calendar.hasHeader = !this.isDropdown;
10841094
this.calendar.locale = this.locale;
10851095
this.calendar.selection = CalendarSelection.RANGE;
10861096
this.calendar.weekStart = this.weekStart;
10871097
this.calendar.hideOutsideDays = this.hideOutsideDays;
10881098
this.calendar.monthsViewNumber = this.displayMonthsCount;
10891099
this.calendar.showWeekNumbers = this.showWeekNumbers;
1100+
this._calendar.headerTitleTemplate = this.headerTitleTemplate;
1101+
this._calendar.headerTemplate = this.headerTemplate;
1102+
this._calendar.subheaderTemplate = this.subheaderTemplate;
10901103
this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
10911104

10921105
componentInstance.mode = this.mode;

‎projects/igniteui-angular/src/lib/date-range-picker/public_api.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/calendar.directives';
12
import { IgxPickerToggleComponent } from '../date-common/picker-icons.common';
23
import { IgxHintDirective } from '../directives/hint/hint.directive';
34
import { IgxLabelDirective } from '../directives/label/label.directive';
@@ -19,5 +20,8 @@ export const IGX_DATE_RANGE_PICKER_DIRECTIVES = [
1920
IgxLabelDirective,
2021
IgxPrefixDirective,
2122
IgxSuffixDirective,
22-
IgxHintDirective
23+
IgxHintDirective,
24+
IgxCalendarHeaderTemplateDirective,
25+
IgxCalendarSubheaderTemplateDirective,
26+
IgxCalendarHeaderTitleTemplateDirective
2327
] as const;

0 commit comments

Comments
 (0)