Add public method to MatCalendar to update today's date #11821

tobiasschweizer · 2018-06-18T08:27:23Z

This PR adds a public method to MatCalendar so today's date is updated correctly after an update of the active date. This is necessary when you do calendar format conversions.

see dhlab-basel/JDNConvertibleCalendarDateAdapter#6 (comment)

tobiasschweizer · 2018-06-18T08:32:38Z

@mmalerba I added a test case for this. However, the test does not really make sense because today's date does not actually change. The test would also pass if the method updateTodaysDate was not called at all.

We would have to switch calendar formats so we could check if today's was updated for the currently active calendar format.

tobiasschweizer · 2018-06-18T08:33:19Z

src/lib/datepicker/calendar.spec.ts

+          calendarInstance.activeDate = newActiveDate;
+          fixture.detectChanges();
+
+          calendarInstance._dateSelected(newActiveDate);


@mmalerba Should this method be publicly accessible?

I don't think so, this is only intended to be called when the user clicks on a date to select it.

The problem is that the new active date needs to be selected after a calendar format conversion, otherwise it does appear as the new active date. Shall I add a method that takes the new active date as a parameter and takes care of all the necessary updates?

At the moment, the code would look like this:

// convert the active date const convertedDate = this._dateAdapter.convertCalendarFormat(this._calendar.activeDate, calendar); // assign the new active date this._calendar.activeDate = convertedDate; // select the new active date this._calendar._dateSelected(convertedDate); // update today's date this._calendar.updateTodaysDate();

Instead, there could be a method like setActiveDate(date: D) that handles all of this:

// convert the active date const convertedDate = this._dateAdapter.convertCalendarFormat(this._calendar.activeDate, calendar); // sets the new active date and takes care of all the necessary updates this._calendar.setActiveDate(convertedDate);

see https://stackblitz.com/edit/angular-ncyrjg src/app/app.component.ts

Hmm I could see it making more sense to add the ability to set the selected date on the mat-datepicker, since that's how most developers would probably interact with it. Would that work for your case? You could probably inject the datepicker similar to how you injected the calendar (probably no @Host though, since datepicker is a few levels up)

I don't know about automatically calling updateTodaysDate, I would leave that up to the user, but adding a public setter for the selected date should be fine.

Setting the activeDate is probably still necessary in your case. You'll want to update both the selected and the active after changing the calendar system.

I think the combined method sounds kind of specific to your use case, not something that other developers would wind up needing that much, so I'd rather keep it separate in material and just have you call the various bits you need from your code

Probably I did not understand the difference between the selected and the active date:

selected date: date that user selects by clicking and is shown in the input field as text

active date: date or date range that is currently shown to the user

today's date: marks today's date with a circle

So if I get it correctly, the new public setter would just change the selected date, and the user would still have to care about showing it to the user by updating the active date and today's date.

Ok, that does not seem hard to do :-)

How would we write a test for updateTodaysDate? Since we do not do calendar conversions here, today's date stays the same.

~~You could just extend the NativeDateAdapter for the test, maybe call it FakeNativeDateAdapter or something and give it a method to change today's date~~

Edit: even easier, just inject the NativeDateAdapter in the test and do:

spyOn(adapter, 'today').and.callFake(() => {...})`

mmalerba · 2018-07-16T19:48:16Z

@tobiasschweizer were you able to get the tests working using this method?

tobiasschweizer · 2018-07-17T04:37:51Z

Not yet. I hope I will find some time to do it this or next week.

tobiasschweizer · 2018-07-17T20:19:12Z

src/lib/datepicker/calendar.ts

@@ -340,6 +340,9 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
            (this.currentView == 'year' ? this.yearView : this.multiYearView);

    view.ngAfterContentInit();
+
+    // to be removed once test works
+    console.log(view._dateAdapter.today());


@mmalerba I am still getting today's date instead of the fake one. Maybe I missed something.

test output removed in
cb84cbe

tobiasschweizer · 2018-07-17T20:20:50Z

src/lib/datepicker/datepicker.ts

@@ -289,6 +289,11 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
    }
  }

+  /** Public method to select a date in the Datepicker */
+  select(date: D): void {


@mmalerba I added a public setter
(#11821 (comment))

You can just remove the underscore on the method below instead

done in
cb84cbe

mmalerba

I hope you don't mind, I just went ahead and fixed the test and pushed it to this branch :)

mmalerba · 2018-07-17T22:04:42Z

src/lib/datepicker/datepicker.ts

@@ -289,6 +289,11 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
    }
  }

+  /** Public method to select a date in the Datepicker */
+  select(date: D): void {


You can just remove the underscore on the method below instead

mmalerba · 2018-07-17T22:56:38Z

src/lib/datepicker/calendar.ts

+
+    view.ngAfterContentInit();
+
+    // to be removed once test works


don't forget to remove this

removed in
cb84cbe

tobiasschweizer · 2018-07-18T07:22:33Z

I hope you don't mind, I just went ahead and fixed the test and pushed it to this branch :)

That's great, thanks a lot!

If I understand correctly

spyOn(adapter, 'today').and.callFake(() => fakeToday);

overwrites the today method of the DateAdapter used by MatCalendar so it always returns whatever you define to be returned by the lambda for callFake.

tobiasschweizer · 2018-07-18T07:59:02Z

@mmalerba There is one failing test in Mode=travis_required:

Firefox 61.0.0 (Linux 0.0.0) MatAccordion should ensure only one item is expanded at a time FAILED

I don't think this is related to this PR.

mmalerba

Yeah, failure looks unrelated

angular-automatic-lock-bot · 2019-09-09T07:01:47Z

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.}

refactor (mat-calendar): add public method to update today's date

6ca8ea7

tobiasschweizer requested a review from mmalerba as a code owner June 18, 2018 08:27

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

tobiasschweizer commented Jun 18, 2018

View reviewed changes

josephperrott added the target: minor This PR is targeted for the next minor release label Jun 26, 2018

Tobias Schweizer added 2 commits July 17, 2018 21:00

Merge branch 'master' into tobiasschweizer-datepicker-todaysdate

8ba2e00

tests (MatCalendar): update today's date

5e07c6f

tobiasschweizer commented Jul 17, 2018

View reviewed changes

fix test

9ecea96

mmalerba reviewed Jul 17, 2018

View reviewed changes

tobiasschweizer mentioned this pull request Jul 18, 2018

Handling of converted date dhlab-basel/JDNConvertibleCalendarDateAdapter#10

Closed

refactor (MatDatepicker): make select a public method

cb84cbe

mmalerba approved these changes Jul 18, 2018

View reviewed changes

mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jul 18, 2018

josephperrott merged commit 37228e5 into angular:master Jul 18, 2018

josephperrott pushed a commit that referenced this pull request Jul 18, 2018

Add public method to MatCalendar to update today's date (#11821)

c509952

tobiasschweizer deleted the tobiasschweizer-datepicker-todaysdate branch July 19, 2018 07:18

tobiasschweizer mentioned this pull request Jul 20, 2018

Use new methods to select new date and update today's date dhlab-basel/JDNConvertibleCalendarDateAdapter#11

Merged

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add public method to MatCalendar to update today's date #11821

Add public method to MatCalendar to update today's date #11821

tobiasschweizer commented Jun 18, 2018 •

edited

Loading

tobiasschweizer commented Jun 18, 2018

tobiasschweizer Jun 18, 2018

mmalerba Jun 18, 2018

tobiasschweizer Jun 19, 2018

tobiasschweizer Jun 19, 2018 •

edited

Loading

mmalerba Jun 20, 2018

mmalerba Jul 3, 2018

mmalerba Jul 3, 2018

tobiasschweizer Jul 3, 2018

tobiasschweizer Jul 3, 2018

mmalerba Jul 3, 2018 •

edited

Loading

mmalerba commented Jul 16, 2018

tobiasschweizer commented Jul 17, 2018

tobiasschweizer Jul 17, 2018

tobiasschweizer Jul 18, 2018

tobiasschweizer Jul 17, 2018

mmalerba Jul 17, 2018

tobiasschweizer Jul 18, 2018

mmalerba left a comment

mmalerba Jul 17, 2018

mmalerba Jul 17, 2018

tobiasschweizer Jul 18, 2018

tobiasschweizer commented Jul 18, 2018

tobiasschweizer commented Jul 18, 2018

mmalerba left a comment

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

Add public method to MatCalendar to update today's date #11821

Add public method to MatCalendar to update today's date #11821

Conversation

tobiasschweizer commented Jun 18, 2018 • edited Loading

tobiasschweizer commented Jun 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Jun 19, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba Jul 3, 2018 • edited Loading

Choose a reason for hiding this comment

mmalerba commented Jul 16, 2018

tobiasschweizer commented Jul 17, 2018

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

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

tobiasschweizer commented Jul 18, 2018

tobiasschweizer commented Jul 18, 2018

mmalerba left a comment

Choose a reason for hiding this comment

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

tobiasschweizer commented Jun 18, 2018 •

edited

Loading

tobiasschweizer Jun 19, 2018 •

edited

Loading

mmalerba Jul 3, 2018 •

edited

Loading