Fixed date picker's searchVal binding in ESF custom date dialog.

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html

@@ -22,7 +22,7 @@
 @if (column.dataType === 'date') {
     <igx-date-picker #picker
         [weekStart]="column.pipeArgs.weekStart ?? weekStart"
-        [(value)]="searchVal"
+        [(ngModel)]="searchVal"
         [locale]="grid.locale"
         [outlet]="grid.outlet"
         (click)="picker.open()"

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

@@ -39,6 +39,7 @@ import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, Filte
 import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 import { IgxChipComponent, IgxBadgeComponent, IgxDatePickerComponent, IgxCalendarComponent, IgxIconComponent } from 'igniteui-angular';
+import { HelperTestFunctions } from '../../../test-utils/calendar-helper-utils';
 
 const DEBOUNCE_TIME = 30;
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
@@ -5074,6 +5075,62 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(grid.filteredData.length).toEqual(1);
         }));
 
+        it('Should properly scroll to prev/next period in custom date filter dialog.', fakeAsync(() => {
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(100);
+            fix.detectChanges();
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(200);
+
+            const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
+            const datePicker = expr.querySelector('igx-date-picker');
+            const input = datePicker.querySelector('input');
+            UIInteractions.simulateClickEvent(input);
+            fix.detectChanges();
+
+            // Click today item.
+            const calendar = document.querySelector('igx-calendar');
+            const todayItem = calendar.querySelector('.igx-days-view__date--current');
+            UIInteractions.simulateClickAndSelectEvent(todayItem.firstChild);
+            tick(100);
+            fix.detectChanges();
+            flush();
+
+            // Reopen calender and click previous month button.
+            UIInteractions.simulateClickEvent(input);
+            fix.detectChanges();
+
+            const prevMonthButton = fix.debugElement.queryAll(
+                                By.css(HelperTestFunctions.CALENDAR_PREV_BUTTON_CSSCLASS),
+                            )[0].nativeElement;
+            prevMonthButton.focus();
+            UIInteractions.simulateMouseEvent(
+                "mousedown",
+                prevMonthButton,
+                0,
+                0,
+            );
+            tick();
+            UIInteractions.simulateMouseEvent(
+                "mouseup",
+                prevMonthButton,
+                0,
+                0,
+            );
+            fix.detectChanges();
+
+            // Verify the calendar is scrolled to previous month.
+            const headerLabel = document.querySelector('igx-calendar').querySelector('.igx-calendar-picker__date') as HTMLElement;
+            const today = new Date();
+            const prevMonth = new Date(today.setMonth(today.getMonth() - 1));
+            const monthName = prevMonth.toLocaleString('default', { month: 'short' });
+            expect(headerLabel.innerText.trim()).toMatch(`${monthName}`);
+        }));
+
         it('Should take pipeArgs weekStart property as calendar\'s default.', fakeAsync(() => {
             const column = grid.getColumnByName('ReleaseDate');