-
implements AfterContentInit {
/** Focuses the active cell after the microtask queue is empty. */
_focusActiveCell() {
- this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+ this._ngZone.runOutsideAngular(() => this._ngZone.onStable.first().subscribe(() => {
let activeEl = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
activeEl.focus();
- });
+ }));
}
/** Whether the two dates represent the same view in the current view mode (month or year). */
@@ -267,6 +266,7 @@ export class MdCalendar implements AfterContentInit {
}
this._focusActiveCell();
+ // Prevent unexpected default actions such as form submission.
event.preventDefault();
}
@@ -310,6 +310,7 @@ export class MdCalendar implements AfterContentInit {
}
this._focusActiveCell();
+ // Prevent unexpected default actions such as form submission.
event.preventDefault();
}
diff --git a/src/lib/datepicker/datepicker-toggle.scss b/src/lib/datepicker/datepicker-toggle.scss
index d8ac34911406..dd394dd25f7c 100644
--- a/src/lib/datepicker/datepicker-toggle.scss
+++ b/src/lib/datepicker/datepicker-toggle.scss
@@ -3,6 +3,7 @@ $mat-datepicker-toggle-icon-size: 24px !default;
.mat-datepicker-toggle {
display: inline-block;
+ // Note: SVG needs to be base64 encoded or it will not work on IE11.
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMWgtMnYySDhWMUg2djJINWMtMS4xMSAwLTEuOTkuOS0xLjk5IDJMMyAxOWMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWOGgxNHYxMXpNNyAxMGg1djVIN3oiLz48L3N2Zz4=') no-repeat;
background-size: contain;
height: $mat-datepicker-toggle-icon-size;
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index e43f4e362ab2..ad59b42996e5 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -3,13 +3,13 @@ import {
ChangeDetectionStrategy,
Component,
ComponentRef,
- ElementRef,
EventEmitter,
Inject,
Input,
OnDestroy,
Optional,
Output,
+ ViewChild,
ViewContainerRef,
ViewEncapsulation
} from '@angular/core';
@@ -34,6 +34,7 @@ import {DateAdapter} from '../core/datetime/index';
import {createMissingDateImplError} from './datepicker-errors';
import {MD_DATE_FORMATS, MdDateFormats} from '../core/datetime/date-formats';
import {ESCAPE} from '../core/keyboard/keycodes';
+import {MdCalendar} from './calendar';
/** Used to generate a unique ID for each datepicker instance. */
@@ -63,16 +64,15 @@ let datepickerUid = 0;
export class MdDatepickerContent implements AfterContentInit {
datepicker: MdDatepicker;
- constructor(private _elementRef: ElementRef) {}
+ @ViewChild(MdCalendar) _calendar: MdCalendar;
ngAfterContentInit() {
- this._elementRef.nativeElement.querySelector('.mat-calendar-content').focus();
+ this._calendar._focusActiveCell();
}
/**
* Handles keydown event on datepicker content.
* @param event The event.
- * @private
*/
_handleKeydown(event: KeyboardEvent): void {
switch (event.keyCode) {
diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts
index b607a21e1bde..d25036d9a6ca 100644
--- a/src/lib/datepicker/month-view.ts
+++ b/src/lib/datepicker/month-view.ts
@@ -149,9 +149,9 @@ export class MdMonthView implements AfterContentInit {
this._dateAdapter.getMonth(this.activeDate), i + 1);
let enabled = !this.dateFilter ||
this.dateFilter(date);
- let a11yLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
+ let ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
this._weeks[this._weeks.length - 1]
- .push(new MdCalendarCell(i + 1, dateNames[i], a11yLabel, enabled));
+ .push(new MdCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
}
}
diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts
index 4482b2f87574..ca27058130e3 100644
--- a/src/lib/datepicker/year-view.ts
+++ b/src/lib/datepicker/year-view.ts
@@ -116,11 +116,11 @@ export class MdYearView implements AfterContentInit {
/** Creates an MdCalendarCell for the given month. */
private _createCellForMonth(month: number, monthName: string) {
- let a11yLabel = this._dateAdapter.format(
+ let ariaLabel = this._dateAdapter.format(
this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),
this._dateFormats.display.monthYearA11yLabel);
return new MdCalendarCell(
- month, monthName.toLocaleUpperCase(), a11yLabel, this._isMonthEnabled(month));
+ month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
}
/** Whether the given month is enabled. */
|