From 819eae7caf5dee45e80025d62b0e15361c6dc4f5 Mon Sep 17 00:00:00 2001 From: Juliano Date: Sun, 28 Jan 2018 15:35:59 -0200 Subject: [PATCH 01/11] feat(datepicker): @Output of year and month selected in multiyear/year views --- package-lock.json | 8 +- src/demo-app/datepicker/datepicker-demo.html | 39 ++++++- src/demo-app/datepicker/datepicker-demo.scss | 4 + src/demo-app/datepicker/datepicker-demo.ts | 35 ++++++- src/lib/datepicker/calendar.html | 2 + src/lib/datepicker/calendar.spec.ts | 42 +++++++- src/lib/datepicker/calendar.ts | 22 ++++ src/lib/datepicker/datepicker-content.html | 2 + src/lib/datepicker/datepicker.spec.ts | 104 +++++++++++++++++-- src/lib/datepicker/datepicker.ts | 23 ++++ src/lib/datepicker/multi-year-view.spec.ts | 13 ++- src/lib/datepicker/multi-year-view.ts | 4 + src/lib/datepicker/year-view.spec.ts | 13 ++- src/lib/datepicker/year-view.ts | 4 + 14 files changed, 298 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4b4e96f77733..59ce0d3d8eda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11265,7 +11265,7 @@ "q": "1.5.1", "sauce-connect-launcher": "1.2.3", "saucelabs": "1.4.0", - "wd": "1.4.1" + "wd": "1.5.0" }, "dependencies": { "q": { @@ -18067,9 +18067,9 @@ "dev": true }, "wd": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/wd/-/wd-1.4.1.tgz", - "integrity": "sha512-C0wWd2X4SWWcyx5qxaixiZE4Vb07sl0yDfWHPeml8lDHSbmI9erE9BmTHIqOGoDxGgJ3/hkFmODQ7ZLKiF8+8Q==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/wd/-/wd-1.5.0.tgz", + "integrity": "sha512-e/KpzTlhtSG3Ek0AcRz4G6PhxGsc53Nro+GkI1er9p05tWQ7W9dpGZR5SqQzGUqvbaqJCThDSAGaY7LHgi6MiA==", "dev": true, "requires": { "archiver": "1.3.0", diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index e858a111b14b..c8254fd0bd92 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -90,7 +90,7 @@

Input disabled datepicker

[matDatepickerFilter]="filterOdd ? dateFilter : null" disabled placeholder="Input disabled"> + [startView]="yearView ? 'year' : 'month'">

@@ -118,7 +118,7 @@

Input disabled, datepicker popup enabled

[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null" placeholder="Input disabled, datepicker enabled"> + [startView]="yearView ? 'year' : 'month'">

@@ -133,3 +133,38 @@

Datepicker with value property binding

[startView]="yearView ? 'year' : 'month'">

+ +

Datepicker emulating year picker

+

+ + + + + + + +

+ +

Datepicker emulating month/year picker

+

+ + + + + + + +

diff --git a/src/demo-app/datepicker/datepicker-demo.scss b/src/demo-app/datepicker/datepicker-demo.scss index 9672ffb589e1..119fef5b25a3 100644 --- a/src/demo-app/datepicker/datepicker-demo.scss +++ b/src/demo-app/datepicker/datepicker-demo.scss @@ -1,3 +1,7 @@ mat-calendar { width: 300px; } + +.datepicker-input-invisible { + display: none; +} diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 8bdcc6f821d4..46d4b46bb3b6 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -8,7 +8,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl} from '@angular/forms'; -import {MatDatepickerInputEvent} from '@angular/material/datepicker'; +import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker'; @Component({ @@ -30,6 +30,8 @@ export class DatepickerDemo { date: Date; lastDateInput: Date | null; lastDateChange: Date | null; + year: number; + yearMonth = ''; dateFilter = (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2) @@ -38,4 +40,35 @@ export class DatepickerDemo { onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; dateCtrl = new FormControl(); + + constructor() { + const date = new Date(); + this.year = date.getFullYear(); + this.yearMonth = (date.getMonth() + 1) + '/' + date.getFullYear(); + } + + chosenYearHandler(year: number, datepicker: MatDatepicker) { + this.year = year; + datepicker.close(); + } + + _open(event: Event, datepicker: MatDatepicker) { + datepicker.open(); + event.stopPropagation(); + } + + chosenYearFromYearMonthHandler(year: number) { + try { + const month = this.yearMonth.split('/')[0]; + this.yearMonth = month + '/' + year; + } catch (e) { throw new Error('Date must be in mm/yyyy format'); } + } + + chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { + try { + const year = this.yearMonth.split('/')[1]; + this.yearMonth = (month + 1) + '/' + year; + } catch (e) { throw new Error('Date must be in mm/yyyy format'); } + datepicker.close(); + } } diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html index 594fc00e1d5d..7b06f3296eab 100644 --- a/src/lib/datepicker/calendar.html +++ b/src/lib/datepicker/calendar.html @@ -36,6 +36,7 @@ [activeDate]="_activeDate" [selected]="selected" [dateFilter]="_dateFilterForViews" + (monthSelected)="_monthSelectedInYearView($event)" (selectedChange)="_goToDateInView($event, 'month')"> @@ -44,6 +45,7 @@ [activeDate]="_activeDate" [selected]="selected" [dateFilter]="_dateFilterForViews" + (yearSelected)="_yearSelectedInMultiYearView($event)" (selectedChange)="_goToDateInView($event, 'year')"> diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts index 24e331b50efc..b9ce77a9f298 100644 --- a/src/lib/datepicker/calendar.spec.ts +++ b/src/lib/datepicker/calendar.spec.ts @@ -196,6 +196,38 @@ describe('MatCalendar', () => { expect(testComponent.selected).toEqual(new Date(2017, JAN, 31)); }); + it('should emit the selected month on cell clicked in year view', () => { + periodButton.click(); + fixture.detectChanges(); + + expect(calendarInstance._currentView).toBe('multi-year'); + expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31)); + + (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click(); + + fixture.detectChanges(); + + expect(calendarInstance._currentView).toBe('year'); + + (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click(); + + expect(fixture.componentInstance.selectedMonth).toEqual(0); + }); + + it('should emit the selected year on cell clicked in multiyear view', () => { + periodButton.click(); + fixture.detectChanges(); + + expect(calendarInstance._currentView).toBe('multi-year'); + expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31)); + + (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click(); + + fixture.detectChanges(); + + expect(fixture.componentInstance.selectedYear).toEqual(2017); + }); + it('should re-render when the i18n labels have changed', inject([MatDatepickerIntl], (intl: MatDatepickerIntl) => { const button = fixture.debugElement.nativeElement @@ -916,10 +948,18 @@ describe('MatCalendar', () => { @Component({ - template: `` + template: ` + + ` }) class StandardCalendar { selected: Date; + selectedYear: number; + selectedMonth: number; startDate = new Date(2017, JAN, 31); } diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index 2243ee53abad..f5eb179b3d39 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -107,6 +107,18 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { /** Emits when the currently selected date changes. */ @Output() readonly selectedChange: EventEmitter = new EventEmitter(); + /** + * Emits the year chosen in multiyear view. + * This doesn't implies in change on the selected date. + */ + @Output() readonly yearSelected = new EventEmitter(); + + /** + * Emits the month chosen in year view. + * This doesn't implies in change on the selected date. + */ + @Output() readonly monthSelected = new EventEmitter(); + /** Emits when any date is selected. */ @Output() readonly _userSelection: EventEmitter = new EventEmitter(); @@ -228,6 +240,16 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { } } + /** Handles year selection in the multiyear view. */ + _yearSelectedInMultiYearView(year: number) { + this.yearSelected.emit(year); + } + + /** Handles month selection in the year view. */ + _monthSelectedInYearView(month: number) { + this.monthSelected.emit(month); + } + _userSelected(): void { this._userSelection.emit(); } diff --git a/src/lib/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html index 60c0cc747809..77269cecf75b 100644 --- a/src/lib/datepicker/datepicker-content.html +++ b/src/lib/datepicker/datepicker-content.html @@ -8,5 +8,7 @@ [dateFilter]="datepicker._dateFilter" [selected]="datepicker._selected" (selectedChange)="datepicker._select($event)" + (yearSelected)="datepicker._selectYear($event)" + (monthSelected)="datepicker._selectMonth($event)" (_userSelection)="datepicker.close()"> diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 311f8897c75c..bb670a9751f5 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -433,12 +433,12 @@ describe('MatDatepicker', () => { }); }); - describe('datepicker with startView', () => { - let fixture: ComponentFixture; - let testComponent: DatepickerWithStartView; + describe('datepicker with startView set to year', () => { + let fixture: ComponentFixture; + let testComponent: DatepickerWithStartViewYear; beforeEach(fakeAsync(() => { - fixture = createComponent(DatepickerWithStartView, [MatNativeDateModule]); + fixture = createComponent(DatepickerWithStartViewYear, [MatNativeDateModule]); fixture.detectChanges(); testComponent = fixture.componentInstance; @@ -461,6 +461,73 @@ describe('MatDatepicker', () => { expect(firstCalendarCell.textContent) .toBe('JAN', 'Expected the calendar to be in year-view'); }); + + it('should fire yearSelected when user selects calendar year in year view', + fakeAsync(() => { + spyOn(testComponent, 'onYearSelection'); + expect(testComponent.onYearSelection).not.toHaveBeenCalled(); + + testComponent.datepicker.open(); + fixture.detectChanges(); + + const cells = document.querySelectorAll('.mat-calendar-body-cell'); + + dispatchMouseEvent(cells[0], 'click'); + fixture.detectChanges(); + flush(); + + expect(testComponent.onYearSelection).toHaveBeenCalled(); + }) + ); + }); + + describe('datepicker with startView set to multiyear', () => { + let fixture: ComponentFixture; + let testComponent: DatepickerWithStartViewMultiYear; + + beforeEach(fakeAsync(() => { + fixture = createComponent(DatepickerWithStartViewMultiYear, [MatNativeDateModule]); + fixture.detectChanges(); + + testComponent = fixture.componentInstance; + + spyOn(testComponent, 'onMultiYearSelection'); + })); + + afterEach(fakeAsync(() => { + testComponent.datepicker.close(); + fixture.detectChanges(); + flush(); + })); + + it('should start at the specified view', () => { + testComponent.datepicker.open(); + fixture.detectChanges(); + + const firstCalendarCell = document.querySelector('.mat-calendar-body-cell')!; + + // When the calendar is in year view, the first cell should be for a month rather than + // for a date. + expect(firstCalendarCell.textContent) + .toBe('2016', 'Expected the calendar to be in multi-year-view'); + }); + + it('should fire yearSelected when user selects calendar year in multiyear view', + fakeAsync(() => { + expect(testComponent.onMultiYearSelection).not.toHaveBeenCalled(); + + testComponent.datepicker.open(); + fixture.detectChanges(); + + const cells = document.querySelectorAll('.mat-calendar-body-cell'); + + dispatchMouseEvent(cells[0], 'click'); + fixture.detectChanges(); + flush(); + + expect(testComponent.onMultiYearSelection).toHaveBeenCalled(); + }) + ); }); describe('datepicker with ngModel', () => { @@ -1003,7 +1070,8 @@ describe('MatDatepicker', () => { expect(testComponent.onDateChange).toHaveBeenCalled(); expect(testComponent.onInput).not.toHaveBeenCalled(); expect(testComponent.onDateInput).toHaveBeenCalled(); - })); + }) + ); }); describe('with ISO 8601 strings as input', () => { @@ -1271,12 +1339,29 @@ class DatepickerWithStartAt { @Component({ template: ` - + `, }) -class DatepickerWithStartView { +class DatepickerWithStartViewYear { date = new Date(2020, JAN, 1); @ViewChild('d') datepicker: MatDatepicker; + + onYearSelection() {} +} + + +@Component({ + template: ` + + + `, +}) +class DatepickerWithStartViewMultiYear { + date = new Date(2020, JAN, 1); + @ViewChild('d') datepicker: MatDatepicker; + + onMultiYearSelection() {} } @@ -1321,6 +1406,7 @@ class DatepickerWithToggle { touchUI = true; } + @Component({ template: ` @@ -1332,6 +1418,7 @@ class DatepickerWithToggle { }) class DatepickerWithCustomIcon {} + @Component({ template: ` @@ -1394,6 +1481,7 @@ class DatepickerWithChangeAndInputEvents { onDateInput() {} } + @Component({ template: ` @@ -1406,6 +1494,7 @@ class DatepickerWithi18n { @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } + @Component({ template: ` @@ -1421,6 +1510,7 @@ class DatepickerWithISOStrings { @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } + @Component({ template: ` diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index 00fb9c046578..c52d424f5881 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -164,6 +164,18 @@ export class MatDatepicker implements OnDestroy { */ @Output() readonly selectedChanged: EventEmitter = new EventEmitter(); + /** + * Emits selected year in multiyear view. + * This doesn't implies in change on the selected date. + */ + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); + + /** + * Emits selected month in year view. + * This doesn't implies in change on the selected date. + */ + @Output() readonly monthSelected = new EventEmitter(); + /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */ @Input() panelClass: string | string[]; @@ -173,6 +185,7 @@ export class MatDatepicker implements OnDestroy { /** Emits when the datepicker has been closed. */ @Output('closed') closedStream: EventEmitter = new EventEmitter(); + /** Whether the calendar is open. */ @Input() get opened(): boolean { return this._opened; } @@ -253,6 +266,16 @@ export class MatDatepicker implements OnDestroy { } } + /** Emits the selected year in multiyear view */ + _selectYear(year: number): void { + this.yearSelected.emit(year); + } + + /** Emits selected month in year view */ + _selectMonth(month: number): void { + this.monthSelected.emit(month); + } + /** * Register an input with this datepicker. * @param input The datepicker input to register with this datepicker. diff --git a/src/lib/datepicker/multi-year-view.spec.ts b/src/lib/datepicker/multi-year-view.spec.ts index 1bca6d81042d..439ce95f9399 100644 --- a/src/lib/datepicker/multi-year-view.spec.ts +++ b/src/lib/datepicker/multi-year-view.spec.ts @@ -66,6 +66,15 @@ describe('MatMultiYearView', () => { expect(selectedEl.innerHTML.trim()).toBe('2039'); }); + it('should emit the selected year on cell clicked', () => { + let cellEls = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell'); + + (cellEls[1] as HTMLElement).click(); + fixture.detectChanges(); + + expect(fixture.componentInstance.selectedYear).toEqual(2017); + }); + it('should mark active date', () => { let cellEls = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell'); expect((cellEls[1] as HTMLElement).innerText.trim()).toBe('2017'); @@ -98,11 +107,13 @@ describe('MatMultiYearView', () => { @Component({ template: ` - `, + ` }) class StandardMultiYearView { date = new Date(2017, JAN, 1); selected = new Date(2020, JAN, 1); + selectedYear: number; @ViewChild(MatYearView) yearView: MatYearView; } diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts index 5c023839b894..a7b72a6e81b1 100644 --- a/src/lib/datepicker/multi-year-view.ts +++ b/src/lib/datepicker/multi-year-view.ts @@ -70,6 +70,9 @@ export class MatMultiYearView implements AfterContentInit { /** Emits when a new month is selected. */ @Output() readonly selectedChange: EventEmitter = new EventEmitter(); + /** Emits the selected year. This doesn't implies in change on the selected date */ + @Output() readonly yearSelected = new EventEmitter(); + /** Grid of calendar cells representing the currently displayed years. */ _years: MatCalendarCell[][]; @@ -110,6 +113,7 @@ export class MatMultiYearView implements AfterContentInit { /** Handles when a new year is selected. */ _yearSelected(year: number) { + this.yearSelected.emit(year); let month = this._dateAdapter.getMonth(this.activeDate); let daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1)); diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index 8937c7130323..e19ef7143a8d 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/src/lib/datepicker/year-view.spec.ts @@ -71,6 +71,15 @@ describe('MatYearView', () => { expect(selectedEl.innerHTML.trim()).toBe('DEC'); }); + it('should emit the selected month on cell clicked', () => { + let cellEls = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell'); + + (cellEls[cellEls.length - 1] as HTMLElement).click(); + fixture.detectChanges(); + + expect(fixture.componentInstance.selectedMonth).toEqual(11); + }); + it('should mark active date', () => { let cellEls = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell'); expect((cellEls[0] as HTMLElement).innerText.trim()).toBe('JAN'); @@ -113,11 +122,13 @@ describe('MatYearView', () => { @Component({ template: ` - `, + ` }) class StandardYearView { date = new Date(2017, JAN, 5); selected = new Date(2017, MAR, 10); + selectedMonth: number; @ViewChild(MatYearView) yearView: MatYearView; } diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index f150ef153e1e..667451421cfe 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -65,6 +65,9 @@ export class MatYearView implements AfterContentInit { /** Emits when a new month is selected. */ @Output() readonly selectedChange: EventEmitter = new EventEmitter(); + /** Emits the selected month. This doesn't implies in change on the selected date */ + @Output() readonly monthSelected = new EventEmitter(); + /** Grid of calendar cells representing the months of the year. */ _months: MatCalendarCell[][]; @@ -99,6 +102,7 @@ export class MatYearView implements AfterContentInit { /** Handles when a new month is selected. */ _monthSelected(month: number) { + this.monthSelected.emit(month); let daysInMonth = this._dateAdapter.getNumDaysInMonth( this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1)); this.selectedChange.emit(this._dateAdapter.createDate( From 4265d176cfe35d5e910e0d2cdf269c87a49ec1c5 Mon Sep 17 00:00:00 2001 From: Juliano Date: Wed, 31 Jan 2018 20:01:29 -0200 Subject: [PATCH 02/11] address @mmalerba's comments --- src/demo-app/datepicker/datepicker-demo.html | 54 +++++++------ src/demo-app/datepicker/datepicker-demo.scss | 3 - src/demo-app/datepicker/datepicker-demo.ts | 79 ++++++++++++++++---- src/demo-app/demo-app-module.ts | 2 +- src/demo-app/demo-app/demo-module.ts | 8 +- src/demo-app/demo-material-module.ts | 2 + src/lib/datepicker/calendar.ts | 4 +- src/lib/datepicker/datepicker.ts | 4 +- src/lib/datepicker/multi-year-view.ts | 2 +- src/lib/datepicker/year-view.ts | 2 +- 10 files changed, 105 insertions(+), 55 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index c8254fd0bd92..a3e454ce2669 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -135,36 +135,32 @@

Datepicker with value property binding

Datepicker emulating year picker

-

- - - - - - - -

+
+ + + + + + +

Datepicker emulating month/year picker

-

- - - +

- - + + + + -

+
diff --git a/src/demo-app/datepicker/datepicker-demo.scss b/src/demo-app/datepicker/datepicker-demo.scss index 119fef5b25a3..1dc57962c1c4 100644 --- a/src/demo-app/datepicker/datepicker-demo.scss +++ b/src/demo-app/datepicker/datepicker-demo.scss @@ -2,6 +2,3 @@ mat-calendar { width: 300px; } -.datepicker-input-invisible { - display: none; -} diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 46d4b46bb3b6..d9e97ac155a3 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -6,10 +6,15 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Directive} from '@angular/core'; import {FormControl} from '@angular/forms'; -import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker'; +import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material'; +import {MomentDateAdapter} from '@angular/material-moment-adapter'; +import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; +import * as _moment from 'moment'; +import {default as _rollupMoment} from 'moment'; +const moment = _rollupMoment || _moment; @Component({ moduleId: module.id, @@ -30,8 +35,9 @@ export class DatepickerDemo { date: Date; lastDateInput: Date | null; lastDateChange: Date | null; - year: number; - yearMonth = ''; + + monthYearDateControl = new FormControl(moment([2017, 10, 25])); + yearDateControl = new FormControl(moment([2017, 10, 25])); dateFilter = (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2) @@ -41,14 +47,12 @@ export class DatepickerDemo { dateCtrl = new FormControl(); - constructor() { - const date = new Date(); - this.year = date.getFullYear(); - this.yearMonth = (date.getMonth() + 1) + '/' + date.getFullYear(); - } + constructor() { } chosenYearHandler(year: number, datepicker: MatDatepicker) { - this.year = year; + const actualDate = this.yearDateControl.value; + actualDate.year(year); + this.yearDateControl.setValue(actualDate); datepicker.close(); } @@ -58,17 +62,62 @@ export class DatepickerDemo { } chosenYearFromYearMonthHandler(year: number) { - try { - const month = this.yearMonth.split('/')[0]; - this.yearMonth = month + '/' + year; + try { + const actualDate = this.monthYearDateControl.value; + actualDate.year(year); + this.monthYearDateControl.setValue(actualDate); + } catch (e) { throw new Error('Date must be in mm/yyyy format'); } } chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { try { - const year = this.yearMonth.split('/')[1]; - this.yearMonth = (month + 1) + '/' + year; + const actualDate = this.monthYearDateControl.value; + actualDate.month(month); + this.monthYearDateControl.setValue(actualDate); } catch (e) { throw new Error('Date must be in mm/yyyy format'); } datepicker.close(); } } + +export const DEMO_MOMENT_MONTH_YEAR_FORMATS = { + parse: { + dateInput: 'MM/YYYY', + }, + display: { + dateInput: 'MM/YYYY', + monthYearLabel: 'MMM YYYY', + dateA11yLabel: 'LL', + monthYearA11yLabel: 'MMMM YYYY', + }, +}; + +@Directive({ + selector: '[demo-moment-month-year]', + providers: [ + {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, + {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_MONTH_YEAR_FORMATS}, + ] +}) +export class DemoMomentMonthYearDirective { } + +export const DEMO_MOMENT_YEAR_FORMATS = { + parse: { + dateInput: 'YYYY', + }, + display: { + dateInput: 'YYYY', + monthYearLabel: 'MMM YYYY', + dateA11yLabel: 'LL', + monthYearA11yLabel: 'MMMM YYYY', + }, +}; + +@Directive({ + selector: '[demo-moment-year]', + providers: [ + {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, + {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_YEAR_FORMATS}, + ] +}) +export class DemoMomentYearDirective { } diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index a60bcb9f2e4d..5e42bbf01d24 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -31,7 +31,7 @@ import {AccessibilityDemoModule} from './a11y/a11y-module'; ], entryComponents: [ EntryApp, - ], + ] }) export class DemoAppModule { constructor(private _appRef: ApplicationRef) { } diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index 566e52b3d27c..5a0737f25ee4 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/src/demo-app/demo-app/demo-module.ts @@ -18,7 +18,11 @@ import {ButtonDemo} from '../button/button-demo'; import {CardDemo} from '../card/card-demo'; import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo'; import {ChipsDemo} from '../chips/chips-demo'; -import {DatepickerDemo} from '../datepicker/datepicker-demo'; +import { + DatepickerDemo, + DemoMomentMonthYearDirective, + DemoMomentYearDirective +} from '../datepicker/datepicker-demo'; import {DemoMaterialModule} from '../demo-material-module'; import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo'; import {DrawerDemo} from '../drawer/drawer-demo'; @@ -79,6 +83,8 @@ import {TableDemoModule} from '../table/table-demo-module'; ChipsDemo, ContentElementDialog, DatepickerDemo, + DemoMomentMonthYearDirective, + DemoMomentYearDirective, DemoApp, DialogDemo, DrawerDemo, diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index 33ff49f3c389..273a67f77282 100644 --- a/src/demo-app/demo-material-module.ts +++ b/src/demo-app/demo-material-module.ts @@ -49,6 +49,7 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PlatformModule} from '@angular/cdk/platform'; import {ObserversModule} from '@angular/cdk/observers'; import {PortalModule} from '@angular/cdk/portal'; +import {MatMomentDateModule} from '@angular/material-moment-adapter'; /** * NgModule that includes all Material modules that are required to serve the demo-app. @@ -88,6 +89,7 @@ import {PortalModule} from '@angular/cdk/portal'; MatToolbarModule, MatTooltipModule, MatNativeDateModule, + MatMomentDateModule, CdkTableModule, A11yModule, BidiModule, diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index f5eb179b3d39..07a1887edab4 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -109,13 +109,13 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { /** * Emits the year chosen in multiyear view. - * This doesn't implies in change on the selected date. + * This doesn't imply a change on the selected date. */ @Output() readonly yearSelected = new EventEmitter(); /** * Emits the month chosen in year view. - * This doesn't implies in change on the selected date. + * This doesn't imply a change on the selected date. */ @Output() readonly monthSelected = new EventEmitter(); diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index c52d424f5881..1e1d152529b4 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -166,13 +166,13 @@ export class MatDatepicker implements OnDestroy { /** * Emits selected year in multiyear view. - * This doesn't implies in change on the selected date. + * This doesn't imply a change on the selected date. */ @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** * Emits selected month in year view. - * This doesn't implies in change on the selected date. + * This doesn't imply a change on the selected date. */ @Output() readonly monthSelected = new EventEmitter(); diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts index a7b72a6e81b1..0db14ae97a9a 100644 --- a/src/lib/datepicker/multi-year-view.ts +++ b/src/lib/datepicker/multi-year-view.ts @@ -70,7 +70,7 @@ export class MatMultiYearView implements AfterContentInit { /** Emits when a new month is selected. */ @Output() readonly selectedChange: EventEmitter = new EventEmitter(); - /** Emits the selected year. This doesn't implies in change on the selected date */ + /** Emits the selected year. This doesn't imply a change on the selected date */ @Output() readonly yearSelected = new EventEmitter(); /** Grid of calendar cells representing the currently displayed years. */ diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 667451421cfe..77abaa626f59 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -65,7 +65,7 @@ export class MatYearView implements AfterContentInit { /** Emits when a new month is selected. */ @Output() readonly selectedChange: EventEmitter = new EventEmitter(); - /** Emits the selected month. This doesn't implies in change on the selected date */ + /** Emits the selected month. This doesn't imply a change on the selected date */ @Output() readonly monthSelected = new EventEmitter(); /** Grid of calendar cells representing the months of the year. */ From e9065e989087b35b2b51723cf9a97a1ebf4e4c1e Mon Sep 17 00:00:00 2001 From: Juliano Date: Wed, 31 Jan 2018 22:19:53 -0200 Subject: [PATCH 03/11] address comments --- src/demo-app/datepicker/datepicker-demo.ts | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index d9e97ac155a3..7df89c2a4ed4 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -45,10 +45,6 @@ export class DatepickerDemo { onDateInput = (e: MatDatepickerInputEvent) => this.lastDateInput = e.value; onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; - dateCtrl = new FormControl(); - - constructor() { } - chosenYearHandler(year: number, datepicker: MatDatepicker) { const actualDate = this.yearDateControl.value; actualDate.year(year); @@ -62,21 +58,15 @@ export class DatepickerDemo { } chosenYearFromYearMonthHandler(year: number) { - try { - const actualDate = this.monthYearDateControl.value; - actualDate.year(year); - this.monthYearDateControl.setValue(actualDate); - - } catch (e) { throw new Error('Date must be in mm/yyyy format'); } + const actualDate = this.monthYearDateControl.value; + actualDate.year(year); + this.monthYearDateControl.setValue(actualDate); } chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { - try { - const actualDate = this.monthYearDateControl.value; - actualDate.month(month); - this.monthYearDateControl.setValue(actualDate); - } catch (e) { throw new Error('Date must be in mm/yyyy format'); } - datepicker.close(); + const actualDate = this.monthYearDateControl.value; + actualDate.month(month); + this.monthYearDateControl.setValue(actualDate); } } From 7ebaa3c6afea5ac5f19b16dd0dd710bc05b5168b Mon Sep 17 00:00:00 2001 From: Juliano Date: Wed, 31 Jan 2018 22:30:11 -0200 Subject: [PATCH 04/11] add types to some outputs --- src/lib/datepicker/calendar.ts | 4 ++-- src/lib/datepicker/datepicker.ts | 2 +- src/lib/datepicker/multi-year-view.ts | 2 +- src/lib/datepicker/year-view.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index 07a1887edab4..f1cc90ce2785 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -111,13 +111,13 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { * Emits the year chosen in multiyear view. * This doesn't imply a change on the selected date. */ - @Output() readonly yearSelected = new EventEmitter(); + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** * Emits the month chosen in year view. * This doesn't imply a change on the selected date. */ - @Output() readonly monthSelected = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Emits when any date is selected. */ @Output() readonly _userSelection: EventEmitter = new EventEmitter(); diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index 1e1d152529b4..9d87fd2aeb44 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -174,7 +174,7 @@ export class MatDatepicker implements OnDestroy { * Emits selected month in year view. * This doesn't imply a change on the selected date. */ - @Output() readonly monthSelected = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */ @Input() panelClass: string | string[]; diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts index 0db14ae97a9a..73153a563f88 100644 --- a/src/lib/datepicker/multi-year-view.ts +++ b/src/lib/datepicker/multi-year-view.ts @@ -71,7 +71,7 @@ export class MatMultiYearView implements AfterContentInit { @Output() readonly selectedChange: EventEmitter = new EventEmitter(); /** Emits the selected year. This doesn't imply a change on the selected date */ - @Output() readonly yearSelected = new EventEmitter(); + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** Grid of calendar cells representing the currently displayed years. */ _years: MatCalendarCell[][]; diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 77abaa626f59..c748a804edda 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -66,7 +66,7 @@ export class MatYearView implements AfterContentInit { @Output() readonly selectedChange: EventEmitter = new EventEmitter(); /** Emits the selected month. This doesn't imply a change on the selected date */ - @Output() readonly monthSelected = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Grid of calendar cells representing the months of the year. */ _months: MatCalendarCell[][]; From 4396b6df3a3ca7abba39b8a2ae2e31d77000d2c7 Mon Sep 17 00:00:00 2001 From: Juliano Date: Wed, 31 Jan 2018 22:47:27 -0200 Subject: [PATCH 05/11] fix wrong parameter type --- src/demo-app/datepicker/datepicker-demo.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 7df89c2a4ed4..9d6e0464ed8d 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -13,7 +13,7 @@ import {MomentDateAdapter} from '@angular/material-moment-adapter'; import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; import * as _moment from 'moment'; -import {default as _rollupMoment} from 'moment'; +import {default as _rollupMoment, Moment} from 'moment'; const moment = _rollupMoment || _moment; @Component({ @@ -45,14 +45,14 @@ export class DatepickerDemo { onDateInput = (e: MatDatepickerInputEvent) => this.lastDateInput = e.value; onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; - chosenYearHandler(year: number, datepicker: MatDatepicker) { + chosenYearHandler(year: number, datepicker: MatDatepicker) { const actualDate = this.yearDateControl.value; actualDate.year(year); this.yearDateControl.setValue(actualDate); datepicker.close(); } - _open(event: Event, datepicker: MatDatepicker) { + _open(event: Event, datepicker: MatDatepicker) { datepicker.open(); event.stopPropagation(); } @@ -63,10 +63,11 @@ export class DatepickerDemo { this.monthYearDateControl.setValue(actualDate); } - chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { + chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { const actualDate = this.monthYearDateControl.value; actualDate.month(month); this.monthYearDateControl.setValue(actualDate); + datepicker.close(); } } From 8d10f24a6568d516f1b271de341b5282e3f6afa8 Mon Sep 17 00:00:00 2001 From: Juliano Date: Wed, 31 Jan 2018 22:58:02 -0200 Subject: [PATCH 06/11] restore accidentally removed object --- src/demo-app/datepicker/datepicker-demo.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 9d6e0464ed8d..be0dc0e4051b 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -39,6 +39,8 @@ export class DatepickerDemo { monthYearDateControl = new FormControl(moment([2017, 10, 25])); yearDateControl = new FormControl(moment([2017, 10, 25])); + dateCtrl = new FormControl(); + dateFilter = (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2) From 8a1fffaa078905f2db3bde7343eedfe02b0c4f02 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 1 Feb 2018 08:19:06 -0200 Subject: [PATCH 07/11] example and docs text --- src/demo-app/datepicker/datepicker-demo.ts | 5 -- src/lib/datepicker/datepicker.md | 17 ++++++ .../datepicker-views-selection-example.css | 1 + .../datepicker-views-selection-example.html | 7 +++ .../datepicker-views-selection-example.ts | 58 +++++++++++++++++++ src/material-examples/material-module.ts | 8 +-- 6 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 src/material-examples/datepicker-views-selection/datepicker-views-selection-example.css create mode 100644 src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html create mode 100644 src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index be0dc0e4051b..e2296e0dfd3b 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -54,11 +54,6 @@ export class DatepickerDemo { datepicker.close(); } - _open(event: Event, datepicker: MatDatepicker) { - datepicker.open(); - event.stopPropagation(); - } - chosenYearFromYearMonthHandler(year: number) { const actualDate = this.monthYearDateControl.value; actualDate.year(year); diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index e9cd81db7c3f..6498904669b8 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -51,6 +51,23 @@ year containing the `startAt` date. +#### Watching the views for changes on selected years and months + +When a year or a month is selected in **multi-year and year views** respecively, the `yearSelected` +and `monthSelected` outputs emit the chosen year (full year) and month (0 - 11). + +Notice that the emitted value does not affect the current value in the connected ``, which +is only bound to the selection made in the `month` view. So if the end user closes the calendar +after choosing a year in `multi-view` mode (by pressing the `ESC` key, for example) , the selected +year, emitted by `yearSelected` output, will not reflect any change in the value of the date in the +associated ``. + +The following example uses `yearSelected` and `monthSelected` outputs to emulate a month and year +picker (if you're not familiar with the usage of `MomentDateAdapter` and `formats customization` +you can read more about them below in this document to fully understand the example). + + + ### Setting the selected date The type of values that the datepicker expects depends on the type of `DateAdapter` provided in your diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.css b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html new file mode 100644 index 000000000000..955c5d5e688a --- /dev/null +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html @@ -0,0 +1,7 @@ + + + + + + diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts new file mode 100644 index 000000000000..83f3a2282213 --- /dev/null +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts @@ -0,0 +1,58 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {MatDatepicker} from '@angular/material/datepicker'; +import {MomentDateAdapter} from '@angular/material-moment-adapter'; +import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; + +// Depending on whether rollup is used, moment needs to be imported differently. +// Since Moment.js doesn't have a default export, we normally need to import using the `* as` +// syntax. However, rollup creates a synthetic default module and we thus need to import it using +// the `default as` syntax. +import * as _moment from 'moment'; +import {default as _rollupMoment, Moment} from 'moment'; +const moment = _rollupMoment || _moment; + +// See the Moment.js docs for the meaning of these formats: +// https://momentjs.com/docs/#/displaying/format/ +export const MY_FORMATS = { + parse: { + dateInput: 'MM/YYYY', + }, + display: { + dateInput: 'MM/YYYY', + monthYearLabel: 'MMM YYYY', + dateA11yLabel: 'LL', + monthYearA11yLabel: 'MMMM YYYY', + }, +}; + +/** @title Datepicker emulating a Year and month picker */ +@Component({ + selector: 'datepicker-views-selection-example', + templateUrl: 'datepicker-views-selection-example.html', + styleUrls: ['datepicker-views-selection-example.css'], + providers: [ + // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your + // application's root module. We provide it at the component level here, due to limitations of + // our example generation script. + {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, + + {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}, + ], +}) +export class DatepickerViewsSelectionExample { + date = new FormControl(moment()); + + chosenYearHandler(year: number) { + const ctrlValue = this.date.value; + ctrlValue.year(year); + this.date.setValue(ctrlValue); + } + + chosenMonthHandler(month: number, datepicker: MatDatepicker) { + const ctrlValue = this.date.value; + ctrlValue.month(month); + this.date.setValue(ctrlValue); + datepicker.close(); + } +} diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts index a10465278135..abdd7c97891c 100644 --- a/src/material-examples/material-module.ts +++ b/src/material-examples/material-module.ts @@ -30,21 +30,21 @@ import { MatInputModule, MatListModule, MatMenuModule, + MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, + MatSidenavModule, MatSlideToggleModule, MatSliderModule, - MatSidenavModule, MatSnackBarModule, + MatSortModule, MatStepperModule, + MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, - MatPaginatorModule, - MatSortModule, - MatTableModule ] }) export class ExampleMaterialModule {} From eaa5c31e739d1e826c592ebe9fc2050ae24be9f3 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 1 Feb 2018 19:10:55 -0200 Subject: [PATCH 08/11] change emitted values to objects instead of just numbers --- src/demo-app/datepicker/datepicker-demo.ts | 12 ++++++------ src/lib/datepicker/calendar.spec.ts | 10 ++++++---- src/lib/datepicker/calendar.ts | 12 ++++++------ src/lib/datepicker/datepicker.md | 10 ++++++++-- src/lib/datepicker/datepicker.ts | 12 ++++++------ src/lib/datepicker/multi-year-view.spec.ts | 5 +++-- src/lib/datepicker/multi-year-view.ts | 4 ++-- src/lib/datepicker/year-view.spec.ts | 5 +++-- src/lib/datepicker/year-view.ts | 12 ++++++++---- .../datepicker-views-selection-example.html | 9 ++++----- .../datepicker-views-selection-example.ts | 8 ++++---- tslint.json | 4 ++-- 12 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index e2296e0dfd3b..7f5922e86cbc 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -47,22 +47,22 @@ export class DatepickerDemo { onDateInput = (e: MatDatepickerInputEvent) => this.lastDateInput = e.value; onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; - chosenYearHandler(year: number, datepicker: MatDatepicker) { + chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker) { const actualDate = this.yearDateControl.value; - actualDate.year(year); + actualDate.year(normalizedYear.year()); this.yearDateControl.setValue(actualDate); datepicker.close(); } - chosenYearFromYearMonthHandler(year: number) { + chosenYearFromYearMonthHandler(normalizedYear: Moment) { const actualDate = this.monthYearDateControl.value; - actualDate.year(year); + actualDate.year(normalizedYear.year()); this.monthYearDateControl.setValue(actualDate); } - chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker) { + chosenMonthFromYearMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker) { const actualDate = this.monthYearDateControl.value; - actualDate.month(month); + actualDate.month(normalizedMonth.month()); this.monthYearDateControl.setValue(actualDate); datepicker.close(); } diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts index b9ce77a9f298..2f8880eac2fb 100644 --- a/src/lib/datepicker/calendar.spec.ts +++ b/src/lib/datepicker/calendar.spec.ts @@ -211,7 +211,8 @@ describe('MatCalendar', () => { (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click(); - expect(fixture.componentInstance.selectedMonth).toEqual(0); + const normalizedMonth: Date = fixture.componentInstance.selectedMonth; + expect(normalizedMonth.getMonth()).toEqual(0); }); it('should emit the selected year on cell clicked in multiyear view', () => { @@ -225,7 +226,8 @@ describe('MatCalendar', () => { fixture.detectChanges(); - expect(fixture.componentInstance.selectedYear).toEqual(2017); + const normalizedYear: Date = fixture.componentInstance.selectedYear; + expect(normalizedYear.getFullYear()).toEqual(2017); }); it('should re-render when the i18n labels have changed', @@ -958,8 +960,8 @@ describe('MatCalendar', () => { }) class StandardCalendar { selected: Date; - selectedYear: number; - selectedMonth: number; + selectedYear: Date; + selectedMonth: Date; startDate = new Date(2017, JAN, 31); } diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index f1cc90ce2785..1cbc49ebce93 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -111,13 +111,13 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { * Emits the year chosen in multiyear view. * This doesn't imply a change on the selected date. */ - @Output() readonly yearSelected: EventEmitter = new EventEmitter(); + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** * Emits the month chosen in year view. * This doesn't imply a change on the selected date. */ - @Output() readonly monthSelected: EventEmitter = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Emits when any date is selected. */ @Output() readonly _userSelection: EventEmitter = new EventEmitter(); @@ -241,13 +241,13 @@ export class MatCalendar implements AfterContentInit, OnDestroy, OnChanges { } /** Handles year selection in the multiyear view. */ - _yearSelectedInMultiYearView(year: number) { - this.yearSelected.emit(year); + _yearSelectedInMultiYearView(normalizedYear: D) { + this.yearSelected.emit(normalizedYear); } /** Handles month selection in the year view. */ - _monthSelectedInYearView(month: number) { - this.monthSelected.emit(month); + _monthSelectedInYearView(normalizedMonth: D) { + this.monthSelected.emit(normalizedMonth); } _userSelected(): void { diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index 6498904669b8..5064c12301b6 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -53,8 +53,14 @@ year containing the `startAt` date. #### Watching the views for changes on selected years and months -When a year or a month is selected in **multi-year and year views** respecively, the `yearSelected` -and `monthSelected` outputs emit the chosen year (full year) and month (0 - 11). +When a year or a month is selected in `multi-year` and `year` views respecively, the `yearSelected` +and `monthSelected` outputs emit the normalized chosen year and normalized month. By "normalized" +we mean that it will emit an object, not just a number. For example, if `` is +configured to work with javascript native Date objects, the `yearSelected` will emit +`new Date(2017,0,1)` if the user selects 2017 in `multi-year` view. Similarly, `monthSelected` +will emit `new Date(2017,1,0)` if the user selects **Jan** in `year` view and the current date +value of the connected `` was something like `new Date(2017,MM,dd)` (the month and year +are irrelevant in this case). Notice that the emitted value does not affect the current value in the connected ``, which is only bound to the selection made in the `month` view. So if the end user closes the calendar diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index 9d87fd2aeb44..8dfc521deda1 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -168,13 +168,13 @@ export class MatDatepicker implements OnDestroy { * Emits selected year in multiyear view. * This doesn't imply a change on the selected date. */ - @Output() readonly yearSelected: EventEmitter = new EventEmitter(); + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** * Emits selected month in year view. * This doesn't imply a change on the selected date. */ - @Output() readonly monthSelected: EventEmitter = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */ @Input() panelClass: string | string[]; @@ -267,13 +267,13 @@ export class MatDatepicker implements OnDestroy { } /** Emits the selected year in multiyear view */ - _selectYear(year: number): void { - this.yearSelected.emit(year); + _selectYear(normalizedYear: D): void { + this.yearSelected.emit(normalizedYear); } /** Emits selected month in year view */ - _selectMonth(month: number): void { - this.monthSelected.emit(month); + _selectMonth(normalizedMonth: D): void { + this.monthSelected.emit(normalizedMonth); } /** diff --git a/src/lib/datepicker/multi-year-view.spec.ts b/src/lib/datepicker/multi-year-view.spec.ts index 439ce95f9399..325b680bcf36 100644 --- a/src/lib/datepicker/multi-year-view.spec.ts +++ b/src/lib/datepicker/multi-year-view.spec.ts @@ -72,7 +72,8 @@ describe('MatMultiYearView', () => { (cellEls[1] as HTMLElement).click(); fixture.detectChanges(); - expect(fixture.componentInstance.selectedYear).toEqual(2017); + const normalizedYear: Date = fixture.componentInstance.selectedYear; + expect(normalizedYear.getFullYear()).toEqual(2017); }); it('should mark active date', () => { @@ -113,7 +114,7 @@ describe('MatMultiYearView', () => { class StandardMultiYearView { date = new Date(2017, JAN, 1); selected = new Date(2020, JAN, 1); - selectedYear: number; + selectedYear: Date; @ViewChild(MatYearView) yearView: MatYearView; } diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts index 73153a563f88..65ebf88610b9 100644 --- a/src/lib/datepicker/multi-year-view.ts +++ b/src/lib/datepicker/multi-year-view.ts @@ -71,7 +71,7 @@ export class MatMultiYearView implements AfterContentInit { @Output() readonly selectedChange: EventEmitter = new EventEmitter(); /** Emits the selected year. This doesn't imply a change on the selected date */ - @Output() readonly yearSelected: EventEmitter = new EventEmitter(); + @Output() readonly yearSelected: EventEmitter = new EventEmitter(); /** Grid of calendar cells representing the currently displayed years. */ _years: MatCalendarCell[][]; @@ -113,7 +113,7 @@ export class MatMultiYearView implements AfterContentInit { /** Handles when a new year is selected. */ _yearSelected(year: number) { - this.yearSelected.emit(year); + this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1)); let month = this._dateAdapter.getMonth(this.activeDate); let daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1)); diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index e19ef7143a8d..b91914718ca4 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/src/lib/datepicker/year-view.spec.ts @@ -77,7 +77,8 @@ describe('MatYearView', () => { (cellEls[cellEls.length - 1] as HTMLElement).click(); fixture.detectChanges(); - expect(fixture.componentInstance.selectedMonth).toEqual(11); + const normalizedMonth: Date = fixture.componentInstance.selectedMonth; + expect(normalizedMonth.getMonth()).toEqual(11); }); it('should mark active date', () => { @@ -128,7 +129,7 @@ describe('MatYearView', () => { class StandardYearView { date = new Date(2017, JAN, 5); selected = new Date(2017, MAR, 10); - selectedMonth: number; + selectedMonth: Date; @ViewChild(MatYearView) yearView: MatYearView; } diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index c748a804edda..4b948f4ac789 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -66,7 +66,7 @@ export class MatYearView implements AfterContentInit { @Output() readonly selectedChange: EventEmitter = new EventEmitter(); /** Emits the selected month. This doesn't imply a change on the selected date */ - @Output() readonly monthSelected: EventEmitter = new EventEmitter(); + @Output() readonly monthSelected: EventEmitter = new EventEmitter(); /** Grid of calendar cells representing the months of the year. */ _months: MatCalendarCell[][]; @@ -102,9 +102,13 @@ export class MatYearView implements AfterContentInit { /** Handles when a new month is selected. */ _monthSelected(month: number) { - this.monthSelected.emit(month); - let daysInMonth = this._dateAdapter.getNumDaysInMonth( - this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1)); + const normalizedDate = + this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1); + + this.monthSelected.emit(normalizedDate); + + const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate); + this.selectedChange.emit(this._dateAdapter.createDate( this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth))); diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html index 955c5d5e688a..148c5ce8a0b3 100644 --- a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html @@ -1,7 +1,6 @@ - - - - + + + diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts index 83f3a2282213..5a59b00d77ac 100644 --- a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts @@ -43,15 +43,15 @@ export const MY_FORMATS = { export class DatepickerViewsSelectionExample { date = new FormControl(moment()); - chosenYearHandler(year: number) { + chosenYearHandler(normalizedYear: Moment) { const ctrlValue = this.date.value; - ctrlValue.year(year); + ctrlValue.year(normalizedYear.year()); this.date.setValue(ctrlValue); } - chosenMonthHandler(month: number, datepicker: MatDatepicker) { + chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker) { const ctrlValue = this.date.value; - ctrlValue.month(month); + ctrlValue.month(normlizedMonth.month()); this.date.setValue(ctrlValue); datepicker.close(); } diff --git a/tslint.json b/tslint.json index 1621579d9375..46f09b7315ce 100644 --- a/tslint.json +++ b/tslint.json @@ -81,7 +81,7 @@ // Disallows importing the whole RxJS library. Submodules can be still imported. "import-blacklist": [true, "rxjs", "rxjs/operators"], // Avoids inconsistent linebreak styles in source files. Forces developers to use LF linebreaks. - "linebreak-style": [true, "LF"], + "linebreak-style": [false, "LF"], // Namespaces are no allowed, because of Closure compiler. "no-namespace": true, "jsdoc-format": [true, "check-multiline-start"], @@ -108,7 +108,7 @@ } }, "src/+(lib|cdk|material-experimental|cdk-experimental)/**/!(*.spec).ts"], "require-license-banner": [ - true, + false, "src/+(lib|cdk|material-experimental|cdk-experimental|demo-app)/**/!(*.spec).ts" ], "no-rxjs-patch-imports": [ From 7d2bbdc1f8d71dcbc617d0ae4e525719a3d7acb6 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 1 Feb 2018 20:53:31 -0200 Subject: [PATCH 09/11] change datepicker.md and switch back tslint configs --- src/lib/datepicker/datepicker.md | 24 +++++++++++++----------- tslint.json | 4 ++-- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index 5064c12301b6..8276b547ccd3 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -54,23 +54,25 @@ year containing the `startAt` date. #### Watching the views for changes on selected years and months When a year or a month is selected in `multi-year` and `year` views respecively, the `yearSelected` -and `monthSelected` outputs emit the normalized chosen year and normalized month. By "normalized" -we mean that it will emit an object, not just a number. For example, if `` is -configured to work with javascript native Date objects, the `yearSelected` will emit -`new Date(2017,0,1)` if the user selects 2017 in `multi-year` view. Similarly, `monthSelected` -will emit `new Date(2017,1,0)` if the user selects **Jan** in `year` view and the current date -value of the connected `` was something like `new Date(2017,MM,dd)` (the month and year -are irrelevant in this case). +and `monthSelected` outputs emit a normalized date representing the chosen year or month. By +"normalized" we mean that the dates representing a year will have their month set to January and +their day set to the 1st. Dates representing months will have their day set to the 1st of the +month. For example, if `` is configured to work with javascript native Date +objects, the `yearSelected` will emit `new Date(2017, 0, 1)` if the user selects 2017 in +`multi-year` view. Similarly, `monthSelected` will emit `new Date(2017, 1, 0)` if the user +selects **January** in `year` view and the current date value of the connected `` was +something like `new Date(2017, MM, dd)` (the month and day are irrelevant in this case). Notice that the emitted value does not affect the current value in the connected ``, which is only bound to the selection made in the `month` view. So if the end user closes the calendar -after choosing a year in `multi-view` mode (by pressing the `ESC` key, for example) , the selected -year, emitted by `yearSelected` output, will not reflect any change in the value of the date in the +after choosing a year in `multi-view` mode (by pressing the `ESC` key, for example), the selected +year, emitted by `yearSelected` output, will not cause any change in the value of the date in the associated ``. The following example uses `yearSelected` and `monthSelected` outputs to emulate a month and year -picker (if you're not familiar with the usage of `MomentDateAdapter` and `formats customization` -you can read more about them below in this document to fully understand the example). +picker (if you're not familiar with the usage of `MomentDateAdapter` and `MAT_DATE_FORMATS` +you can [read more about them](#choosing-a-date-implementation-and-date-format-settings) below in +this document to fully understand the example). diff --git a/tslint.json b/tslint.json index 46f09b7315ce..1621579d9375 100644 --- a/tslint.json +++ b/tslint.json @@ -81,7 +81,7 @@ // Disallows importing the whole RxJS library. Submodules can be still imported. "import-blacklist": [true, "rxjs", "rxjs/operators"], // Avoids inconsistent linebreak styles in source files. Forces developers to use LF linebreaks. - "linebreak-style": [false, "LF"], + "linebreak-style": [true, "LF"], // Namespaces are no allowed, because of Closure compiler. "no-namespace": true, "jsdoc-format": [true, "check-multiline-start"], @@ -108,7 +108,7 @@ } }, "src/+(lib|cdk|material-experimental|cdk-experimental)/**/!(*.spec).ts"], "require-license-banner": [ - false, + true, "src/+(lib|cdk|material-experimental|cdk-experimental|demo-app)/**/!(*.spec).ts" ], "no-rxjs-patch-imports": [ From dc400b326749fec66c4e14370efdd951f57ef251 Mon Sep 17 00:00:00 2001 From: Juliano Date: Thu, 1 Feb 2018 21:01:05 -0200 Subject: [PATCH 10/11] fix nit --- src/lib/datepicker/datepicker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index 8276b547ccd3..c2dcb2edb0cc 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -60,7 +60,7 @@ their day set to the 1st. Dates representing months will have their day set to t month. For example, if `` is configured to work with javascript native Date objects, the `yearSelected` will emit `new Date(2017, 0, 1)` if the user selects 2017 in `multi-year` view. Similarly, `monthSelected` will emit `new Date(2017, 1, 0)` if the user -selects **January** in `year` view and the current date value of the connected `` was +selects **February** in `year` view and the current date value of the connected `` was something like `new Date(2017, MM, dd)` (the month and day are irrelevant in this case). Notice that the emitted value does not affect the current value in the connected ``, which From ed1829c7be3fdc5a52abad89e06366424f7fb73d Mon Sep 17 00:00:00 2001 From: Juliano Date: Mon, 5 Feb 2018 23:56:28 -0200 Subject: [PATCH 11/11] Remove changes in demo app --- src/demo-app/datepicker/datepicker-demo.html | 31 -------- src/demo-app/datepicker/datepicker-demo.ts | 75 +------------------- src/demo-app/demo-app/demo-module.ts | 8 +-- src/demo-app/demo-material-module.ts | 2 - 4 files changed, 3 insertions(+), 113 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index a3e454ce2669..4d428a549f79 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -133,34 +133,3 @@

Datepicker with value property binding

[startView]="yearView ? 'year' : 'month'">

- -

Datepicker emulating year picker

-
- - - - - - -
- -

Datepicker emulating month/year picker

-
- - - - - - -
diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 7f5922e86cbc..ae4c40758458 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -6,15 +6,9 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectionStrategy, Component, Directive} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl} from '@angular/forms'; -import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material'; -import {MomentDateAdapter} from '@angular/material-moment-adapter'; -import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; - -import * as _moment from 'moment'; -import {default as _rollupMoment, Moment} from 'moment'; -const moment = _rollupMoment || _moment; +import {MatDatepickerInputEvent} from '@angular/material'; @Component({ moduleId: module.id, @@ -36,9 +30,6 @@ export class DatepickerDemo { lastDateInput: Date | null; lastDateChange: Date | null; - monthYearDateControl = new FormControl(moment([2017, 10, 25])); - yearDateControl = new FormControl(moment([2017, 10, 25])); - dateCtrl = new FormControl(); dateFilter = @@ -46,66 +37,4 @@ export class DatepickerDemo { onDateInput = (e: MatDatepickerInputEvent) => this.lastDateInput = e.value; onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; - - chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker) { - const actualDate = this.yearDateControl.value; - actualDate.year(normalizedYear.year()); - this.yearDateControl.setValue(actualDate); - datepicker.close(); - } - - chosenYearFromYearMonthHandler(normalizedYear: Moment) { - const actualDate = this.monthYearDateControl.value; - actualDate.year(normalizedYear.year()); - this.monthYearDateControl.setValue(actualDate); - } - - chosenMonthFromYearMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker) { - const actualDate = this.monthYearDateControl.value; - actualDate.month(normalizedMonth.month()); - this.monthYearDateControl.setValue(actualDate); - datepicker.close(); - } } - -export const DEMO_MOMENT_MONTH_YEAR_FORMATS = { - parse: { - dateInput: 'MM/YYYY', - }, - display: { - dateInput: 'MM/YYYY', - monthYearLabel: 'MMM YYYY', - dateA11yLabel: 'LL', - monthYearA11yLabel: 'MMMM YYYY', - }, -}; - -@Directive({ - selector: '[demo-moment-month-year]', - providers: [ - {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, - {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_MONTH_YEAR_FORMATS}, - ] -}) -export class DemoMomentMonthYearDirective { } - -export const DEMO_MOMENT_YEAR_FORMATS = { - parse: { - dateInput: 'YYYY', - }, - display: { - dateInput: 'YYYY', - monthYearLabel: 'MMM YYYY', - dateA11yLabel: 'LL', - monthYearA11yLabel: 'MMMM YYYY', - }, -}; - -@Directive({ - selector: '[demo-moment-year]', - providers: [ - {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, - {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_YEAR_FORMATS}, - ] -}) -export class DemoMomentYearDirective { } diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index 5a0737f25ee4..566e52b3d27c 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/src/demo-app/demo-app/demo-module.ts @@ -18,11 +18,7 @@ import {ButtonDemo} from '../button/button-demo'; import {CardDemo} from '../card/card-demo'; import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo'; import {ChipsDemo} from '../chips/chips-demo'; -import { - DatepickerDemo, - DemoMomentMonthYearDirective, - DemoMomentYearDirective -} from '../datepicker/datepicker-demo'; +import {DatepickerDemo} from '../datepicker/datepicker-demo'; import {DemoMaterialModule} from '../demo-material-module'; import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo'; import {DrawerDemo} from '../drawer/drawer-demo'; @@ -83,8 +79,6 @@ import {TableDemoModule} from '../table/table-demo-module'; ChipsDemo, ContentElementDialog, DatepickerDemo, - DemoMomentMonthYearDirective, - DemoMomentYearDirective, DemoApp, DialogDemo, DrawerDemo, diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index 273a67f77282..33ff49f3c389 100644 --- a/src/demo-app/demo-material-module.ts +++ b/src/demo-app/demo-material-module.ts @@ -49,7 +49,6 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PlatformModule} from '@angular/cdk/platform'; import {ObserversModule} from '@angular/cdk/observers'; import {PortalModule} from '@angular/cdk/portal'; -import {MatMomentDateModule} from '@angular/material-moment-adapter'; /** * NgModule that includes all Material modules that are required to serve the demo-app. @@ -89,7 +88,6 @@ import {MatMomentDateModule} from '@angular/material-moment-adapter'; MatToolbarModule, MatTooltipModule, MatNativeDateModule, - MatMomentDateModule, CdkTableModule, A11yModule, BidiModule,