From 8cb982895f09247947cf376054a39e78a41e730a Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Mon, 21 Mar 2022 21:08:22 +0000
Subject: [PATCH] docs: fix bug in datepicker-views-selection demo

Fix issue #24230 in the Datepicker Views Selection code demo. When selecting a month, set the year
on the form value to the active year on the datepicker.

Previously, this demo would only set the year when clicking on a year in the datepicker, but this
did not account for changing the year with the next/previous year buttons.

Fixes #24230
---
 .../datepicker-views-selection-example.html           |  3 +--
 .../datepicker-views-selection-example.ts             | 11 +++--------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html
index 647332fa7a77..1e72b7504430 100644
--- a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html
+++ b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html
@@ -4,8 +4,7 @@
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp
                   startView="multi-year"
-                  (yearSelected)="chosenYearHandler($event)"
-                  (monthSelected)="chosenMonthHandler($event, dp)"
+                  (monthSelected)="setMonthAndYear($event, dp)"
                   panelClass="example-month-picker">
   </mat-datepicker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
index ab9ddbc4af24..c97df1bfaf48 100644
--- a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
@@ -49,15 +49,10 @@ export const MY_FORMATS = {
 export class DatepickerViewsSelectionExample {
   date = new FormControl(moment());
 
-  chosenYearHandler(normalizedYear: Moment) {
+  setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
     const ctrlValue = this.date.value;
-    ctrlValue.year(normalizedYear.year());
-    this.date.setValue(ctrlValue);
-  }
-
-  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
-    const ctrlValue = this.date.value;
-    ctrlValue.month(normalizedMonth.month());
+    ctrlValue.month(normalizedMonthAndYear.month());
+    ctrlValue.year(normalizedMonthAndYear.year());
     this.date.setValue(ctrlValue);
     datepicker.close();
   }