fix(datepicker): gray out filtered years in multi-year view #9563

julianobrasil · 2018-01-24T11:19:15Z

donroyco · 2018-01-24T12:33:46Z

src/lib/datepicker/multi-year-view.spec.ts

+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disabled years with no enabled days', () => {


mmalerba

Looks good, just some style nits

mmalerba · 2018-01-24T17:32:14Z

src/lib/datepicker/multi-year-view.ts

-import {DateAdapter} from '@angular/material/core';
-import {MatCalendarCell} from './calendar-body';
-import {createMissingDateImplError} from './datepicker-errors';
+import { DateAdapter } from '@angular/material/core';


mmalerba · 2018-01-24T17:32:21Z

src/lib/datepicker/multi-year-view.ts

@@ -47,9 +47,9 @@ export class MatMultiYearView<D> implements AfterContentInit {
  set activeDate(value: D) {
    let oldActiveDate = this._activeDate;
    this._activeDate =
-        this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+      this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();


mmalerba · 2018-01-24T17:32:29Z

src/lib/datepicker/multi-year-view.ts

@@ -79,8 +79,8 @@ export class MatMultiYearView<D> implements AfterContentInit {
  /** The year of the selected date. Null if the selected date is null. */
  _selectedYear: number | null;

-  constructor(@Optional() public _dateAdapter: DateAdapter<D>,
-              private _changeDetectorRef: ChangeDetectorRef) {
+  constructor( @Optional() public _dateAdapter: DateAdapter<D>,


mmalerba · 2018-01-24T17:32:40Z

src/lib/datepicker/multi-year-view.ts

@@ -112,9 +112,9 @@ export class MatMultiYearView<D> implements AfterContentInit {
  _yearSelected(year: number) {
    let month = this._dateAdapter.getMonth(this.activeDate);
    let daysInMonth =
-        this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));


mmalerba · 2018-01-24T17:33:15Z

src/lib/datepicker/multi-year-view.ts

+      return true;
+    }
+
+    let firstOfYear = this._dateAdapter.createDate(year, 0, 1);


julianobrasil · 2018-01-24T18:14:37Z

Comments addressed. "SHIFT+ALT+F" from habit... 😊

mmalerba

LGTM, two more nits though. will add merge ready once they're fixed

mmalerba · 2018-01-24T18:17:42Z

src/lib/datepicker/multi-year-view.ts

@@ -49,7 +49,7 @@ export class MatMultiYearView<D> implements AfterContentInit {
    this._activeDate =
        this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
    if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
-        Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
+      Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {


missed this one

mmalerba · 2018-01-24T18:17:51Z

src/lib/datepicker/multi-year-view.ts

@@ -114,7 +114,7 @@ export class MatMultiYearView<D> implements AfterContentInit {
    let daysInMonth =
        this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));
    this.selectedChange.emit(this._dateAdapter.createDate(year, month,
-        Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
+      Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));


missed this one

rafaelss95 · 2018-01-25T01:41:07Z

src/lib/datepicker/multi-year-view.spec.ts

+      fixture = TestBed.createComponent(MultiYearViewWithDateFilter);
+      fixture.detectChanges();
+
+      let multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));


rafaelss95 · 2018-01-25T01:41:13Z

src/lib/datepicker/multi-year-view.spec.ts

+    });
+
+    it('should disablex years with no enabled days', () => {
+      let cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');


rafaelss95 · 2018-01-25T01:41:34Z

src/lib/datepicker/multi-year-view.spec.ts

+class MultiYearViewWithDateFilter {
+  activeDate = new Date(2017, JAN, 1);
+  dateFilter(date: Date) {
+    if (date.getFullYear() == 2017) {


What about return date.getFullYear() !== 2017;?

rafaelss95 · 2018-01-25T01:42:32Z

src/demo-app/datepicker/datepicker-demo.ts

@@ -31,7 +31,7 @@ export class DatepickerDemo {
  lastDateInput: Date | null;
  lastDateChange: Date | null;

-  dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
+  dateFilter = (date: Date) => date.getFullYear() % 2 == 0 && date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;


Could be simplified to !date.getFullYear() && date.getMonth() % 2 == 1 && !date.getDate() % 2;

Assume you meant: !date.getFullYear() % 2 && date.getMonth() % 2 && !date.getDate() % 2;?

Ups, yes. Bad copy/paste :D

angular-automatic-lock-bot · 2019-09-08T05:02:49Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

fix filter years in multi-year view

943aa90

julianobrasil requested a review from mmalerba as a code owner January 24, 2018 11:19

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 24, 2018

julianobrasil changed the title ~~fix(datepicker): filter years in multi-year view~~ fix(datepicker): gray out filtered years in multi-year view Jan 24, 2018

donroyco reviewed Jan 24, 2018

View reviewed changes

fix typos

e59ceec

mmalerba reviewed Jan 24, 2018

View reviewed changes

mmalerba added the target: patch This PR is targeted for the next patch release label Jan 24, 2018

address @Malerba's comment

08c3691

mmalerba approved these changes Jan 24, 2018

View reviewed changes

mmalerba added the pr: lgtm label Jan 24, 2018

more styling fixes

2ab0832

mmalerba added the action: merge The PR is ready for merge by the caretaker label Jan 24, 2018

rafaelss95 reviewed Jan 25, 2018

View reviewed changes

julianobrasil added 2 commits January 25, 2018 07:10

address rafael's comments

d764085

fix lint errors

7af5ba0

jelbourn merged commit 403ebbd into angular:master Jan 25, 2018

julianobrasil deleted the fix-datepicker branch January 26, 2018 00:51

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(datepicker): gray out filtered years in multi-year view #9563

fix(datepicker): gray out filtered years in multi-year view #9563

julianobrasil commented Jan 24, 2018

donroyco Jan 24, 2018

mmalerba left a comment

mmalerba Jan 24, 2018

mmalerba Jan 24, 2018

mmalerba Jan 24, 2018

mmalerba Jan 24, 2018

mmalerba Jan 24, 2018

julianobrasil commented Jan 24, 2018

mmalerba left a comment

mmalerba Jan 24, 2018

mmalerba Jan 24, 2018

rafaelss95 Jan 25, 2018

rafaelss95 Jan 25, 2018

rafaelss95 Jan 25, 2018 •

edited

Loading

rafaelss95 Jan 25, 2018

mmalerba Jan 25, 2018

rafaelss95 Jan 25, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

fix(datepicker): gray out filtered years in multi-year view #9563

fix(datepicker): gray out filtered years in multi-year view #9563

Conversation

julianobrasil commented Jan 24, 2018

Choose a reason for hiding this comment

mmalerba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianobrasil commented Jan 24, 2018

mmalerba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaelss95 Jan 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019

rafaelss95 Jan 25, 2018 •

edited

Loading