feat(datepicker): @Output for year and month selected in multiyear/year #9678

julianobrasil · 2018-01-30T01:57:29Z

@Outputs to emit the selected year in multiyear view and the selected month in month view.

mmalerba

Thanks for the change! I think people will be really happy about this. We should probably add a section to the docs about it, along with embedded examples.

mmalerba · 2018-01-30T17:15:31Z

src/demo-app/datepicker/datepicker-demo.html

+
+<h2>Datepicker emulating year picker</h2>
+<p>
+  <input matInput [matDatepicker]="datePicker5" class="datepicker-input-invisible">


This hidden input stuff feels kind of hacky. What if we just use the MomentDateAdapter and provide a custom MAT_DATE_FORMATS

Our custom formats could just be a copy of the defaults but with the parse and display formats for dateInput changed to MM/YYYY or YYYY respectively.

As for how to fit this into the demo, you could make some directives demo-moment-month-year, demo-moment-year that provide the appropriate things for their children

I'll work on it.

mmalerba · 2018-01-30T17:24:00Z

src/lib/datepicker/calendar.ts

@@ -107,6 +107,18 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
  /** Emits when the currently selected date changes. */
  @Output() readonly selectedChange = new EventEmitter<D>();

+  /**
+   * Emits the year chosen in multiyear view.
+   * This doesn't implies in change on the selected date.


This doesn't imply a change in the selected date.

mmalerba · 2018-01-30T17:24:04Z

src/lib/datepicker/calendar.ts

+
+  /**
+   * Emits the month chosen in year view.
+   * This doesn't implies in change on the selected date.


This doesn't imply a change in the selected date.

mmalerba · 2018-01-30T17:27:18Z

src/lib/datepicker/datepicker.ts

@@ -164,6 +164,18 @@ export class MatDatepicker<D> implements OnDestroy {
   */
  @Output() readonly selectedChanged: EventEmitter<D> = new EventEmitter<D>();

+  /**
+   * Emits selected year in multiyear view.
+   * This doesn't implies in change on the selected date.


same change to wording here

mmalerba · 2018-01-30T17:27:52Z

src/lib/datepicker/year-view.ts

@@ -65,6 +65,9 @@ export class MatYearView<D> implements AfterContentInit {
  /** Emits when a new month is selected. */
  @Output() readonly selectedChange = new EventEmitter<D>();

+  /** Emits the selected month. This doesn't implies in change on the selected date */


same change to wording

mmalerba · 2018-01-30T17:28:17Z

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

  @Output() readonly selectedChange = new EventEmitter<D>();

+  /** Emits the selected year. This doesn't implies in change on the selected date */


same change to wording

julianobrasil · 2018-01-31T22:17:17Z

Well, it's done. There are two things I'm not sure whether I should touch:

A way to disable the period button that switches views: if the developer wants to use this feature to emulate a year/month picker, maybe he/she also wishes to prevent the end user from switching views by clicking on that button.
The docs examples: in one comment above I've writen that maybe the examples should be in a different PR, but I'm having second thoughts about it (because this PR would block the other). Do we still have time for doing this part?

mmalerba · 2018-02-01T00:06:21Z

I think we can save that for another PR (feat(datepicker): Add Custom Header to DatePicker #9639), if we do it at all. There's another PR ongoing to allow specifying a custom header for the calendar which would allow people to address this issue.
I'll leave it up to you whether to do the docs in this PR or a separate one. If you want I can approve this one after all of the comments are addressed and you can start working on the docs. If you finish the docs before this gets merged we can just put it all in this PR.

mmalerba · 2018-01-31T23:47:38Z

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

  dateFilter =
      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)

  onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
  onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;

  dateCtrl = new FormControl();
+
+  constructor() { }


nit: can omit constructor since its not doing anything

mmalerba · 2018-01-31T23:49:14Z

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

+  }
+
+  chosenYearFromYearMonthHandler(year: number) {
+    try {      


did you find that these try/catch blocks were necessary for some reason? if the date doesn't parse I believe the forms validation should know about it and you can just display a mat-error

Yeah, that's something I put in the code and for no reason I left them there. I've just taken it away.

julianobrasil · 2018-02-01T00:23:12Z

You can go on and aprove this one.

views

julianobrasil · 2018-02-01T00:27:26Z

I have just rebased it.

mmalerba

1 more nit then I'll add merge-ready

mmalerba · 2018-02-01T00:41:29Z

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

  dateFilter =
      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)

  onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
  onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;

-  dateCtrl = new FormControl();
+  chosenYearHandler(year: number, datepicker: MatDatepicker<Date>) {


nit: these should probably actually be MatDatepicker<Moment> (or MatDatepicker<any> since your code doesn't care)

I'm gonna use Moment for that just to expose the fact we're using Moment.js.

julianobrasil · 2018-02-01T10:24:11Z

Just added docs example and text. I added a subsection in Setting the calendar starting view. Is it appropriate?

mmalerba · 2018-02-01T16:33:01Z

src/lib/datepicker/datepicker.md

@@ -51,6 +51,23 @@ year containing the `startAt` date.

 <!-- example(datepicker-start-view) -->

+#### 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`


...in the multi-year and year views...

mmalerba · 2018-02-01T16:38:59Z

src/lib/datepicker/datepicker.md

+#### 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).


now that I think about this some more, wouldn't it make sense to emit normalized dates
(e.g. new Date(year, 0, 1) and new Date(year, month, 1))? especially for the month case, the month number alone doesn't give you all the info you need

ok, I'm gonna update this and push it tonight.

mmalerba · 2018-02-01T16:40:56Z

src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html

@@ -0,0 +1,7 @@
+<mat-form-field>
+  <input matInput [matDatepicker]="dp" placeholder="Choose a year and a month" [formControl]="date">
+  <mat-datepicker-toggle matSuffix [for]="dp" (yearSelected)="chosenYearHandler($event)"


These listeners should go on the datepicker, not the toggle

mmalerba · 2018-02-01T16:44:47Z

I'm pretty happy with how this turned out. It's actually not that difficult to implement month and year selector with these outputs :)

julianobrasil · 2018-02-01T21:23:44Z

I've changed the first paragraph of datepicker.md. But I'm not sure if it's clear so please have a closer look at it.

mmalerba · 2018-02-01T21:56:23Z

src/lib/datepicker/datepicker.md

+#### 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"


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

mmalerba · 2018-02-01T21:57:15Z

src/lib/datepicker/datepicker.md

+we mean that it will emit an object, not just a number. For example, if `<mat-datepicker>` 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


Jan --> January

mmalerba · 2018-02-01T21:58:08Z

src/lib/datepicker/datepicker.md

+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 `<input>` was something like `new Date(2017,MM,dd)` (the month and year


month and day

mmalerba · 2018-02-01T21:59:15Z

src/lib/datepicker/datepicker.md

+associated `<input>`.
+
+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`


formats customization ---> MAT_DATE_FORMATS

mmalerba · 2018-02-01T21:59:47Z

src/lib/datepicker/datepicker.md

+
+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).


link the words "read more about them" to the correct header in this document.

mmalerba · 2018-02-01T22:00:56Z

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"],


were the changes to this file made intentionally? I don't think we want to change these settings

Absolutely not. I'm used to switch those to false just to run tslint locally, and this time I forgot to switch them back after tests.

mmalerba

Thanks for the changes!

julianobrasil · 2018-02-01T23:01:53Z

Just fixed a small nit...

mmalerba · 2018-02-05T19:55:26Z

@julianobrasil This is breaking google's build when I try to presubmit it because we don't sync the moment adapter into google3, but we try to verify that the demo app builds. Could you revert the changes to the demo app? (the examples are what's important to users anyways, demo app is just for the sake of our own manual testing)

julianobrasil · 2018-02-06T02:22:54Z

I removed the demo changes, but there's still this error in the build process:

6 Feb 02:07:41 - error querying from https://saucelabs.com/rest/v1/angular-ci/tunnels/fa545dcef4e04d65927544a2ab05f0e3, error was: {"message": "Service is temporarily unavailable"}

edit: I had forgotten one last reference to MatMomentModule in demo-material-module.ts

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

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

julianobrasil requested review from jelbourn and mmalerba as code owners January 30, 2018 01:57

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

mmalerba self-assigned this Jan 30, 2018

mmalerba reviewed Jan 30, 2018

View reviewed changes

mmalerba reviewed Feb 1, 2018

View reviewed changes

julianobrasil added 3 commits January 31, 2018 22:26

feat(datepicker): @output of year and month selected in multiyear/year

819eae7

views

address @mmalerba's comments

4265d17

address comments

e9065e9

add types to some outputs

7ebaa3c

mmalerba added pr: lgtm target: minor This PR is targeted for the next minor release labels Feb 1, 2018

mmalerba approved these changes Feb 1, 2018

View reviewed changes

julianobrasil added 2 commits January 31, 2018 22:47

fix wrong parameter type

4396b6d

restore accidentally removed object

8d10f24

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

julianobrasil requested a review from amcdnl as a code owner February 1, 2018 10:20

example and docs text

8a1fffa

mmalerba reviewed Feb 1, 2018

View reviewed changes

mmalerba removed the action: merge The PR is ready for merge by the caretaker label Feb 1, 2018

change emitted values to objects instead of just numbers

eaa5c31

mmalerba reviewed Feb 1, 2018

View reviewed changes

change datepicker.md and switch back tslint configs

7d2bbdc

mmalerba approved these changes Feb 1, 2018

View reviewed changes

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

fix nit

dc400b3

julianobrasil mentioned this pull request Feb 3, 2018

fix(datepicker): add max/min filter to multi year and year views #9727

Merged

mmalerba added presubmit failures This PR has failures in Google's internal presubmit process and cannot be immediately merged and removed action: merge The PR is ready for merge by the caretaker labels Feb 5, 2018

Remove changes in demo app

ed1829c

mmalerba added action: merge The PR is ready for merge by the caretaker and removed presubmit failures This PR has failures in Google's internal presubmit process and cannot be immediately merged labels Feb 6, 2018

mmalerba merged commit c2e108e into angular:master Feb 6, 2018

julianobrasil deleted the featYearMonthPicker branch February 7, 2018 09:53

mmalerba mentioned this pull request Mar 1, 2018

datepicker: document new features for 6.0.0 #10221

Closed

4 tasks

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

		@Output() readonly selectedChange = new EventEmitter<D>();

		/** Emits the selected year. This doesn't implies in change on the selected date */

feat(datepicker): @Output for year and month selected in multiyear/year #9678

feat(datepicker): @Output for year and month selected in multiyear/year #9678

Conversation

julianobrasil commented Jan 30, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianobrasil commented Jan 31, 2018 • edited Loading

mmalerba commented Feb 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianobrasil commented Feb 1, 2018

julianobrasil commented Feb 1, 2018

mmalerba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianobrasil Feb 1, 2018 • edited Loading

Choose a reason for hiding this comment

julianobrasil commented Feb 1, 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

mmalerba commented Feb 1, 2018

julianobrasil commented Feb 1, 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

Choose a reason for hiding this comment

julianobrasil Feb 1, 2018 • edited Loading

Choose a reason for hiding this comment

mmalerba left a comment

Choose a reason for hiding this comment

julianobrasil commented Feb 1, 2018

mmalerba commented Feb 5, 2018

julianobrasil commented Feb 6, 2018 • edited Loading

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

julianobrasil commented Jan 31, 2018 •

edited

Loading

julianobrasil Feb 1, 2018 •

edited

Loading

julianobrasil commented Feb 1, 2018 •

edited

Loading

julianobrasil Feb 1, 2018 •

edited

Loading

julianobrasil commented Feb 6, 2018 •

edited

Loading