diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
index 70a7cc1e6556..f974fc7228c7 100644
--- a/src/demo-app/datepicker/datepicker-demo.html
+++ b/src/demo-app/datepicker/datepicker-demo.html
@@ -1,11 +1,6 @@
Work in progress, not ready for use.
-
-
-
-{{selected?.toNativeDate()}}
-
-
+
diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts
index 240e721a5ef9..214febf1eff0 100644
--- a/src/demo-app/datepicker/datepicker-demo.ts
+++ b/src/demo-app/datepicker/datepicker-demo.ts
@@ -9,7 +9,5 @@ import {SimpleDate} from '@angular/material';
styleUrls: ['datepicker-demo.css'],
})
export class DatepickerDemo {
- startAt = new SimpleDate(2017, 0, 1);
- date = SimpleDate.today();
- selected: SimpleDate;
+ date: SimpleDate;
}
diff --git a/src/lib/datepicker/calendar-table.spec.ts b/src/lib/datepicker/calendar-table.spec.ts
index fb9869bda99a..3ebf0dbce262 100644
--- a/src/lib/datepicker/calendar-table.spec.ts
+++ b/src/lib/datepicker/calendar-table.spec.ts
@@ -1,15 +1,16 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MdDatepickerModule} from './index';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
-import {MdCalendarTable, MdCalendarCell} from './calendar-table';
+import {MdCalendarCell, MdCalendarTable} from './calendar-table';
import {By} from '@angular/platform-browser';
describe('MdCalendarTable', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MdDatepickerModule],
declarations: [
+ MdCalendarTable,
+
+ // Test components.
StandardCalendarTable,
],
});
diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
index 27608c2b655b..e0de6b649550 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/src/lib/datepicker/calendar.spec.ts
@@ -1,16 +1,27 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MdDatepickerModule} from './index';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {SimpleDate} from '../core/datetime/simple-date';
import {MdCalendar} from './calendar';
import {By} from '@angular/platform-browser';
+import {MdMonthView} from './month-view';
+import {MdYearView} from './year-view';
+import {MdCalendarTable} from './calendar-table';
+import {DatetimeModule} from '../core/datetime/index';
describe('MdCalendar', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MdDatepickerModule],
+ imports: [
+ DatetimeModule,
+ ],
declarations: [
+ MdCalendar,
+ MdCalendarTable,
+ MdMonthView,
+ MdYearView,
+
+ // Test components.
StandardCalendar,
],
});
diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
index 84290461e160..f7be57566e25 100644
--- a/src/lib/datepicker/datepicker-input.ts
+++ b/src/lib/datepicker/datepicker-input.ts
@@ -1,23 +1,100 @@
-import {Directive, ElementRef, Input} from '@angular/core';
+import {
+ AfterContentInit, Directive, ElementRef, forwardRef, Input, OnDestroy,
+ Renderer
+} from '@angular/core';
import {MdDatepicker} from './datepicker';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {SimpleDate} from '../core/datetime/simple-date';
+import {CalendarLocale} from '../core/datetime/calendar-locale';
+import {Subscription} from 'rxjs';
+
+
+export const MD_DATEPICKER_VALUE_ACCESSOR: any = {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => MdDatepickerInput),
+ multi: true
+};
/** Directive used to connect an input to a MdDatepicker. */
@Directive({
selector: 'input[mdDatepicker], input[matDatepicker]',
+ providers: [MD_DATEPICKER_VALUE_ACCESSOR],
+ host: {
+ '(input)': '_onChange($event.target.value)',
+ '(blur)': '_onTouched()',
+ }
})
-export class MdDatepickerInput {
+export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor, OnDestroy {
@Input()
set mdDatepicker(value: MdDatepicker) {
if (value) {
this._datepicker = value;
- this._datepicker._registerInput(this._elementRef);
+ this._datepicker._registerInput(this);
}
}
private _datepicker: MdDatepicker;
+ @Input()
+ get value(): SimpleDate {
+ return this._value;
+ }
+ set value(value: SimpleDate) {
+ this._value = this._locale.parseDate(value);
+ const stringValue = this._value == null ? '' : this._locale.formatDate(this._value);
+ this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', stringValue);
+ }
+ private _value: SimpleDate;
+
@Input()
set matDatepicker(value: MdDatepicker) { this.mdDatepicker = value; }
- constructor(private _elementRef: ElementRef) {}
+ _onChange = (value: any) => {};
+
+ _onTouched = () => {};
+
+ private _datepickerSubscription: Subscription;
+
+ constructor(private _elementRef: ElementRef, private _renderer: Renderer,
+ private _locale: CalendarLocale) {}
+
+ ngAfterContentInit() {
+ if (this._datepicker) {
+ this._datepickerSubscription =
+ this._datepicker.selectedChanged.subscribe((selected: SimpleDate) => {
+ this.value = selected;
+ this._onChange(selected);
+ });
+ }
+ }
+
+ ngOnDestroy() {
+ if (this._datepickerSubscription) {
+ this._datepickerSubscription.unsubscribe();
+ }
+ }
+
+ getPopupConnectionElementRef(): ElementRef {
+ return this._elementRef;
+ }
+
+ // Implemented as part of ControlValueAccessor
+ writeValue(value: SimpleDate): void {
+ this.value = value;
+ }
+
+ // Implemented as part of ControlValueAccessor
+ registerOnChange(fn: (value: any) => void): void {
+ this._onChange = value => fn(this._locale.parseDate(value));
+ }
+
+ // Implemented as part of ControlValueAccessor
+ registerOnTouched(fn: () => void): void {
+ this._onTouched = fn;
+ }
+
+ // Implemented as part of ControlValueAccessor
+ setDisabledState(disabled: boolean): void {
+ this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', disabled);
+ }
}
diff --git a/src/lib/datepicker/datepicker.html b/src/lib/datepicker/datepicker.html
index 389890cfa5e2..c7cf5a083d31 100644
--- a/src/lib/datepicker/datepicker.html
+++ b/src/lib/datepicker/datepicker.html
@@ -1,6 +1,8 @@
+ [class.mat-datepicker-non-touch]="!touchUi"
+ [startAt]="startAt"
+ [(selected)]="_selected">
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index b6dbfab95629..45923506150a 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/src/lib/datepicker/datepicker.spec.ts
@@ -1,16 +1,25 @@
-import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {MdDatepickerModule} from './index';
import {Component, ViewChild} from '@angular/core';
import {MdDatepicker} from './datepicker';
+import {MdDatepickerInput} from './datepicker-input';
+import {SimpleDate} from '../core/datetime/simple-date';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {By} from '@angular/platform-browser';
+import {dispatchFakeEvent} from '../core/testing/dispatch-events';
+
describe('MdDatepicker', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MdDatepickerModule],
+ imports: [MdDatepickerModule, FormsModule, ReactiveFormsModule],
declarations: [
StandardDatepicker,
MultiInputDatepicker,
NoInputDatepicker,
+ DatepickerWithStartAt,
+ DatepickerWithNgModel,
+ DatepickerWithFormControl,
],
});
@@ -46,7 +55,7 @@ describe('MdDatepicker', () => {
expect(document.querySelector('md-dialog-container')).not.toBeNull();
});
- it('close should close popup', () => {
+ it('close should close popup', async(() => {
testComponent.datepicker.openStandardUi();
fixture.detectChanges();
@@ -57,10 +66,12 @@ describe('MdDatepicker', () => {
testComponent.datepicker.close();
fixture.detectChanges();
- expect(parseInt(getComputedStyle(popup).height)).toBe(0);
- });
+ fixture.whenStable().then(() => {
+ expect(parseInt(getComputedStyle(popup).height)).toBe(0);
+ });
+ }));
- it('close should close dialog', () => {
+ it('close should close dialog', async(() => {
testComponent.datepicker.openTouchUi();
fixture.detectChanges();
@@ -69,7 +80,30 @@ describe('MdDatepicker', () => {
testComponent.datepicker.close();
fixture.detectChanges();
- expect(document.querySelector('md-dialog-container')).toBeNull();
+ fixture.whenStable().then(() => {
+ expect(document.querySelector('md-dialog-container')).toBeNull();
+ });
+ }));
+
+ it('setting selected should update input and close calendar', async(() => {
+ testComponent.datepicker.openTouchUi();
+ fixture.detectChanges();
+
+ expect(document.querySelector('md-dialog-container')).not.toBeNull();
+ expect(testComponent.datepickerInput.value).toEqual(new SimpleDate(2020, 0, 1));
+
+ let selected = new SimpleDate(2017, 0, 1);
+ testComponent.datepicker._selected = selected;
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ expect(document.querySelector('md-dialog-container')).toBeNull();
+ expect(testComponent.datepickerInput.value).toEqual(selected);
+ });
+ }));
+
+ it('startAt should fallback to input value', () => {
+ expect(testComponent.datepicker.startAt).toEqual(new SimpleDate(2020, 0, 1));
});
});
@@ -95,14 +129,170 @@ describe('MdDatepicker', () => {
expect(() => testComponent.datepicker.openStandardUi()).toThrow();
});
});
+
+ describe('datepicker with startAt', () => {
+ let fixture: ComponentFixture;
+ let testComponent: DatepickerWithStartAt;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DatepickerWithStartAt);
+ fixture.detectChanges();
+
+ testComponent = fixture.componentInstance;
+ });
+
+ it('explicit startAt should override input value', () => {
+ expect(testComponent.datepicker.startAt).toEqual(new SimpleDate(2010, 0, 1));
+ });
+ });
+
+ describe('datepicker with ngModel', () => {
+ let fixture: ComponentFixture;
+ let testComponent: DatepickerWithNgModel;
+
+ beforeEach(fakeAsync(() => {
+ fixture = TestBed.createComponent(DatepickerWithNgModel);
+ detectModelChanges(fixture);
+
+ testComponent = fixture.componentInstance;
+ }));
+
+ it('should update datepicker when model changes', fakeAsync(() => {
+ expect(testComponent.datepickerInput.value).toBeNull();
+ expect(testComponent.datepicker._selected).toBeNull();
+
+ let selected = new SimpleDate(2017, 0, 1);
+ testComponent.selected = selected;
+ detectModelChanges(fixture);
+
+ expect(testComponent.datepickerInput.value).toEqual(selected);
+ expect(testComponent.datepicker._selected).toEqual(selected);
+ }));
+
+ it('should update model when date is selected', fakeAsync(() => {
+ expect(testComponent.selected).toBeNull();
+ expect(testComponent.datepickerInput.value).toBeNull();
+
+ let selected = new SimpleDate(2017, 0, 1);
+ testComponent.datepicker._selected = selected;
+ detectModelChanges(fixture);
+
+ expect(testComponent.selected).toEqual(selected);
+ expect(testComponent.datepickerInput.value).toEqual(selected);
+ }));
+
+ it('should mark input dirty after input event', () => {
+ let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.classList).toContain('ng-pristine');
+
+ dispatchFakeEvent(inputEl, 'input');
+ fixture.detectChanges();
+
+ expect(inputEl.classList).toContain('ng-dirty');
+ });
+
+ it('should mark input dirty after date selected', fakeAsync(() => {
+ let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.classList).toContain('ng-pristine');
+
+ testComponent.datepicker._selected = new SimpleDate(2017, 0, 1);
+ detectModelChanges(fixture);
+
+ expect(inputEl.classList).toContain('ng-dirty');
+ }));
+
+ it('should not mark dirty after model change', fakeAsync(() => {
+ let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.classList).toContain('ng-pristine');
+
+ testComponent.selected = new SimpleDate(2017, 0, 1);
+ detectModelChanges(fixture);
+
+ expect(inputEl.classList).toContain('ng-pristine');
+ }));
+
+ it('should mark input touched on blur', () => {
+ let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.classList).toContain('ng-untouched');
+
+ dispatchFakeEvent(inputEl, 'focus');
+ fixture.detectChanges();
+
+ expect(inputEl.classList).toContain('ng-untouched');
+
+ dispatchFakeEvent(inputEl, 'blur');
+ fixture.detectChanges();
+
+ expect(inputEl.classList).toContain('ng-touched');
+ });
+ });
+
+ describe('datepicker with formControl', () => {
+ let fixture: ComponentFixture;
+ let testComponent: DatepickerWithFormControl;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DatepickerWithFormControl);
+ fixture.detectChanges();
+
+ testComponent = fixture.componentInstance;
+ });
+
+ it('should update datepicker when formControl changes', () => {
+ expect(testComponent.datepickerInput.value).toBeNull();
+ expect(testComponent.datepicker._selected).toBeNull();
+
+ let selected = new SimpleDate(2017, 0, 1);
+ testComponent.formControl.setValue(selected);
+ fixture.detectChanges();
+
+ expect(testComponent.datepickerInput.value).toEqual(selected);
+ expect(testComponent.datepicker._selected).toEqual(selected);
+ });
+
+ it('should update formControl when date is selected', () => {
+ expect(testComponent.formControl.value).toBeNull();
+ expect(testComponent.datepickerInput.value).toBeNull();
+
+ let selected = new SimpleDate(2017, 0, 1);
+ testComponent.datepicker._selected = selected;
+ fixture.detectChanges();
+
+ expect(testComponent.formControl.value).toEqual(selected);
+ expect(testComponent.datepickerInput.value).toEqual(selected);
+ });
+
+ it('should disable input when form control disabled', () => {
+ let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.disabled).toBe(false);
+
+ testComponent.formControl.disable();
+ fixture.detectChanges();
+
+ expect(inputEl.disabled).toBe(true);
+ });
+ });
});
+function detectModelChanges(fixture: ComponentFixture) {
+ fixture.detectChanges();
+ tick();
+ fixture.detectChanges();
+}
+
+
@Component({
- template: ``,
+ template: ``,
})
class StandardDatepicker {
@ViewChild('d') datepicker: MdDatepicker;
+ @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput;
}
@@ -111,9 +301,7 @@ class StandardDatepicker {
`,
})
-class MultiInputDatepicker {
- @ViewChild('d') datepicker: MdDatepicker;
-}
+class MultiInputDatepicker {}
@Component({
@@ -122,3 +310,37 @@ class MultiInputDatepicker {
class NoInputDatepicker {
@ViewChild('d') datepicker: MdDatepicker;
}
+
+
+@Component({
+ template: `
+
+
+ `,
+})
+class DatepickerWithStartAt {
+ @ViewChild('d') datepicker: MdDatepicker;
+}
+
+
+@Component({
+ template: ``
+})
+class DatepickerWithNgModel {
+ selected: SimpleDate = null;
+ @ViewChild('d') datepicker: MdDatepicker;
+ @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput;
+}
+
+
+@Component({
+ template: `
+
+
+ `
+})
+class DatepickerWithFormControl {
+ formControl = new FormControl();
+ @ViewChild('d') datepicker: MdDatepicker;
+ @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput;
+}
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 417fe8e514ad..27a325bb0d73 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -1,9 +1,9 @@
import {
ChangeDetectionStrategy,
- Component,
- ElementRef,
+ Component, EventEmitter,
+ Input,
OnDestroy,
- Optional,
+ Optional, Output,
TemplateRef,
ViewChild,
ViewContainerRef,
@@ -22,6 +22,9 @@ import {
OriginConnectionPosition,
OverlayConnectionPosition
} from '../core/overlay/position/connected-position';
+import {SimpleDate} from '../core/datetime/simple-date';
+import {MdDatepickerInput} from './datepicker-input';
+import {CalendarLocale} from '../core/datetime/calendar-locale';
/** Component responsible for managing the datepicker popup/dialog. */
@@ -34,6 +37,32 @@ import {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MdDatepicker implements OnDestroy {
+ /** The date to open the calendar to initially. */
+ @Input()
+ get startAt(): SimpleDate {
+ // If an explicit startAt is set we start there, otherwise we start at whatever the currently
+ // selected value is.
+ if (this._startAt) {
+ return this._startAt;
+ }
+ if (this._datepickerInput) {
+ return this._datepickerInput.value;
+ }
+ return null;
+ }
+ set startAt(date: SimpleDate) { this._startAt = this._locale.parseDate(date); }
+ private _startAt: SimpleDate;
+
+ @Output() selectedChanged = new EventEmitter();
+
+ get _selected(): SimpleDate {
+ return this._datepickerInput ? this._datepickerInput.value : null;
+ }
+ set _selected(value: SimpleDate) {
+ this.selectedChanged.emit(value);
+ this.close();
+ }
+
/**
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
* than a popup and elements have more padding to allow for bigger touch targets.
@@ -53,10 +82,11 @@ export class MdDatepicker implements OnDestroy {
private _calendarPortal: TemplatePortal;
/** The input element this datepicker is associated with. */
- private _inputElementRef: ElementRef;
+ private _datepickerInput: MdDatepickerInput;
constructor(private _dialog: MdDialog, private _overlay: Overlay,
- private _viewContainerRef: ViewContainerRef, @Optional() private _dir: Dir) {}
+ private _viewContainerRef: ViewContainerRef, private _locale: CalendarLocale,
+ @Optional() private _dir: Dir) {}
ngOnDestroy() {
this.close();
@@ -69,11 +99,11 @@ export class MdDatepicker implements OnDestroy {
* Register an input with this datepicker.
* @param inputElementRef An ElementRef for the input.
*/
- _registerInput(inputElementRef: ElementRef): void {
- if (this._inputElementRef) {
+ _registerInput(input: MdDatepickerInput): void {
+ if (this._datepickerInput) {
throw new MdError('An MdDatepicker can only be associated with a single input.');
}
- this._inputElementRef = inputElementRef;
+ this._datepickerInput = input;
}
/** Opens the calendar in standard UI mode. */
@@ -91,7 +121,7 @@ export class MdDatepicker implements OnDestroy {
* @param touchUi Whether to use the touch UI.
*/
private _open(touchUi = false): void {
- if (!this._inputElementRef) {
+ if (!this._datepickerInput) {
throw new MdError('Attempted to open an MdDatepicker with no associated input.');
}
@@ -150,6 +180,7 @@ export class MdDatepicker implements OnDestroy {
private _createPopupPositionStrategy(): PositionStrategy {
let origin = {originX: 'start', originY: 'bottom'} as OriginConnectionPosition;
let overlay = {overlayX: 'start', overlayY: 'top'} as OverlayConnectionPosition;
- return this._overlay.position().connectedTo(this._inputElementRef, origin, overlay);
+ return this._overlay.position().connectedTo(
+ this._datepickerInput.getPopupConnectionElementRef(), origin, overlay);
}
}
diff --git a/src/lib/datepicker/index.ts b/src/lib/datepicker/index.ts
index 5f6c2f471738..b8138a0fd46c 100644
--- a/src/lib/datepicker/index.ts
+++ b/src/lib/datepicker/index.ts
@@ -20,8 +20,23 @@ export * from './year-view';
@NgModule({
- imports: [CommonModule, DatetimeModule, MdDialogModule, OverlayModule],
- exports: [MdCalendar, MdCalendarTable, MdDatepicker, MdDatepickerInput, MdMonthView, MdYearView],
- declarations: [MdCalendar, MdCalendarTable, MdDatepicker, MdDatepickerInput, MdMonthView, MdYearView],
+ imports: [
+ CommonModule,
+ DatetimeModule,
+ MdDialogModule,
+ OverlayModule,
+ ],
+ exports: [
+ MdDatepicker,
+ MdDatepickerInput,
+ ],
+ declarations: [
+ MdCalendar,
+ MdCalendarTable,
+ MdDatepicker,
+ MdDatepickerInput,
+ MdMonthView,
+ MdYearView,
+ ],
})
export class MdDatepickerModule {}
diff --git a/src/lib/datepicker/month-view.spec.ts b/src/lib/datepicker/month-view.spec.ts
index c9a7badd5f92..3b19a23401ce 100644
--- a/src/lib/datepicker/month-view.spec.ts
+++ b/src/lib/datepicker/month-view.spec.ts
@@ -1,16 +1,23 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MdDatepickerModule} from './index';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdMonthView} from './month-view';
import {SimpleDate} from '../core/datetime/simple-date';
+import {MdCalendarTable} from './calendar-table';
+import {DatetimeModule} from '../core/datetime/index';
describe('MdMonthView', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MdDatepickerModule],
+ imports: [
+ DatetimeModule,
+ ],
declarations: [
+ MdCalendarTable,
+ MdMonthView,
+
+ // Test components.
StandardMonthView,
],
});
@@ -32,9 +39,9 @@ describe('MdMonthView', () => {
testComponent = fixture.componentInstance;
});
- it('has correct year label', () => {
+ it('has correct month label', () => {
let labelEl = monthViewNativeElement.querySelector('.mat-calendar-table-label');
- expect(labelEl.innerHTML.trim()).toBe('Jan 2017');
+ expect(labelEl.innerHTML.trim()).toBe('JAN');
});
it('has 31 days', () => {
diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts
index a60febe29320..b86294299b0e 100644
--- a/src/lib/datepicker/year-view.spec.ts
+++ b/src/lib/datepicker/year-view.spec.ts
@@ -1,16 +1,23 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MdDatepickerModule} from './index';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdYearView} from './year-view';
import {SimpleDate} from '../core/datetime/simple-date';
+import {MdCalendarTable} from './calendar-table';
+import {DatetimeModule} from '../core/datetime/index';
describe('MdYearView', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MdDatepickerModule],
+ imports: [
+ DatetimeModule,
+ ],
declarations: [
+ MdCalendarTable,
+ MdYearView,
+
+ // Test components.
StandardYearView,
],
});
@@ -44,7 +51,7 @@ describe('MdYearView', () => {
it('shows selected month if in same year', () => {
let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-table-selected');
- expect(selectedEl.innerHTML.trim()).toBe('Mar');
+ expect(selectedEl.innerHTML.trim()).toBe('MAR');
});
it('does not show selected month if in different year', () => {
@@ -61,7 +68,7 @@ describe('MdYearView', () => {
fixture.detectChanges();
let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-table-selected');
- expect(selectedEl.innerHTML.trim()).toBe('Dec');
+ expect(selectedEl.innerHTML.trim()).toBe('DEC');
});
});
});