mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(datepicker): don't allow clicks on disabled cells in year and multi-year views (#13448)
This commit is contained in:
committed by
Joey Perrott
parent
a7df1d0a3b
commit
c15bad2f36
@@ -12,7 +12,6 @@ describe('MatCalendarBody', () => {
|
||||
|
||||
// Test components.
|
||||
StandardCalendarBody,
|
||||
CalendarBodyWithDisabledCells,
|
||||
],
|
||||
});
|
||||
|
||||
@@ -101,37 +100,6 @@ describe('MatCalendarBody', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('calendar body with disabled cells', () => {
|
||||
let fixture: ComponentFixture<CalendarBodyWithDisabledCells>;
|
||||
let testComponent: CalendarBodyWithDisabledCells;
|
||||
let calendarBodyNativeElement: Element;
|
||||
let cellEls: HTMLElement[];
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CalendarBodyWithDisabledCells);
|
||||
fixture.detectChanges();
|
||||
|
||||
const calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody));
|
||||
calendarBodyNativeElement = calendarBodyDebugElement.nativeElement;
|
||||
testComponent = fixture.componentInstance;
|
||||
cellEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'));
|
||||
});
|
||||
|
||||
it('should only allow selection of disabled cells when allowDisabledSelection is true', () => {
|
||||
cellEls[0].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(testComponent.selected).toBeFalsy();
|
||||
|
||||
testComponent.allowDisabledSelection = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
cellEls[0].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(testComponent.selected).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -160,25 +128,6 @@ class StandardCalendarBody {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
template: `<table mat-calendar-body
|
||||
[rows]="rows"
|
||||
[allowDisabledSelection]="allowDisabledSelection"
|
||||
(selectedValueChange)="selected = $event">
|
||||
</table>`
|
||||
})
|
||||
class CalendarBodyWithDisabledCells {
|
||||
rows = [[1, 2, 3, 4]].map(r => r.map(d => {
|
||||
let cell = createCell(d);
|
||||
cell.enabled = d % 2 == 0;
|
||||
return cell;
|
||||
}));
|
||||
allowDisabledSelection = false;
|
||||
selected: number;
|
||||
}
|
||||
|
||||
|
||||
function createCell(value: number) {
|
||||
return new MatCalendarCell(value, `${value}`, `${value}-label`, true);
|
||||
}
|
||||
|
||||
@@ -67,9 +67,6 @@ export class MatCalendarBody {
|
||||
/** The number of columns in the table. */
|
||||
@Input() numCols = 7;
|
||||
|
||||
/** Whether to allow selection of disabled cells. */
|
||||
@Input() allowDisabledSelection = false;
|
||||
|
||||
/** The cell number of the active cell in the table. */
|
||||
@Input() activeCell = 0;
|
||||
|
||||
@@ -85,10 +82,9 @@ export class MatCalendarBody {
|
||||
constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) { }
|
||||
|
||||
_cellClicked(cell: MatCalendarCell): void {
|
||||
if (!this.allowDisabledSelection && !cell.enabled) {
|
||||
return;
|
||||
if (cell.enabled) {
|
||||
this.selectedValueChange.emit(cell.value);
|
||||
}
|
||||
this.selectedValueChange.emit(cell.value);
|
||||
}
|
||||
|
||||
/** The number of blank cells to put at the beginning for the first row. */
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
|
||||
</thead>
|
||||
<tbody mat-calendar-body
|
||||
allowDisabledSelection="true"
|
||||
[rows]="_years"
|
||||
[todayValue]="_todayYear"
|
||||
[selectedValue]="_selectedYear"
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
|
||||
</thead>
|
||||
<tbody mat-calendar-body
|
||||
allowDisabledSelection="true"
|
||||
[label]="_yearLabel"
|
||||
[rows]="_months"
|
||||
[todayValue]="_todayMonth"
|
||||
|
||||
Reference in New Issue
Block a user