Merge pull request #15044 from IgniteUI/didimmova/fix-14933

fix(datepicker): fix header title templating

Author: kdinev

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

@@ -6,7 +6,7 @@ import {
     IgxHintDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective
 } from '../input-group/public_api';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { IFormattingViews, IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api';
+import { IFormattingViews, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, WEEKDAYS } from '../calendar/public_api';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
 import {
@@ -46,6 +46,7 @@ describe('IgxDatePicker', () => {
                     IgxDatePickerTestComponent,
                     IgxDatePickerNgModelComponent,
                     IgxDatePickerWithProjectionsComponent,
+                    IgxDatePickerWithTemplatesComponent,
                     IgxDatePickerInFormComponent,
                     IgxDatePickerReactiveFormComponent
                 ]
@@ -492,6 +493,47 @@ describe('IgxDatePicker', () => {
             });
         });
 
+        describe('Templated Header', () => {
+            let fixture: ComponentFixture<IgxDatePickerWithTemplatesComponent>;
+
+            beforeEach(fakeAsync(() => {
+              TestBed.configureTestingModule({
+                imports: [IgxDatePickerWithTemplatesComponent]
+              }).compileComponents();
+
+              fixture = TestBed.createComponent(IgxDatePickerWithTemplatesComponent);
+              fixture.detectChanges();
+            }));
+
+            it('Should use the custom template for header title', fakeAsync(() => {
+              const testDate = new Date(2024, 10, 11);
+              fixture.componentInstance.datePicker.value = testDate;
+              fixture.componentInstance.datePicker.open();
+              tick();
+              fixture.detectChanges();
+
+              const headerTitleElement = fixture.debugElement.query(By.css('.igx-calendar__header-year'));
+              expect(headerTitleElement).toBeTruthy('Header title element should be present');
+              if (headerTitleElement) {
+                expect(headerTitleElement.nativeElement.textContent.trim()).toBe('2024');
+              }
+            }));
+
+            it('Should use the custom template for header', fakeAsync(() => {
+              const testDate = new Date(2024, 10, 11);
+              fixture.componentInstance.datePicker.value = testDate;
+              fixture.componentInstance.datePicker.open();
+              tick();
+              fixture.detectChanges();
+
+              const headerElement = fixture.debugElement.query(By.css('.igx-calendar__header-date'));
+              expect(headerElement).toBeTruthy('Header element should be present');
+              if (headerElement) {
+                expect(headerElement.nativeElement.textContent.trim()).toBe('Nov');
+              }
+            }));
+        });
+
         describe('UI Interaction', () => {
             let fixture: ComponentFixture<any>;
             let datePicker: IgxDatePickerComponent;
@@ -1531,6 +1573,20 @@ export class IgxDatePickerWithProjectionsComponent {
     public showCustomClear = false;
 }
 
+@Component({
+    template: `
+    <igx-date-picker [mode]="mode">
+        <ng-template igxCalendarHeaderTitle let-formatCalendar>{{ formatCalendar.year.value }}</ng-template>
+        <ng-template igxCalendarHeader let-formatCalendar>{{ formatCalendar.month.value }}</ng-template>
+    </igx-date-picker>`,
+    standalone: true,
+    imports: [IgxDatePickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective]
+})
+export class IgxDatePickerWithTemplatesComponent {
+    @ViewChild(IgxDatePickerComponent) public datePicker: IgxDatePickerComponent;
+    public mode: PickerInteractionMode = PickerInteractionMode.Dialog;
+}
+
 @Component({
     template: `
     <form #form="ngForm">

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

@@ -36,7 +36,7 @@ import {
     Validator
 } from '@angular/forms';
 import {
-    IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective,
+    IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective,
      IFormattingViews, IFormattingOptions
 } from '../calendar/public_api';
 import { isDateInRanges } from '../calendar/common/helpers';
@@ -411,6 +411,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
 
+    @ContentChild(IgxCalendarHeaderTitleTemplateDirective)
+    private headerTitleTemplate: IgxCalendarHeaderTitleTemplateDirective;
+
     @ContentChild(IgxCalendarHeaderTemplateDirective)
     private headerTemplate: IgxCalendarHeaderTemplateDirective;
 
@@ -972,6 +975,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this._calendar.locale = this.locale;
         this._calendar.weekStart = this.weekStart;
         this._calendar.specialDates = this.specialDates;
+        this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
         this._calendar.headerOrientation = this.headerOrientation;