bug(datepicker): does not change selected year when using the left/right arrows with the Year and Month picker

[PhonicUK]

Demo and steps to reproduce the issue

This issue affects the DatePicker component. When using the next/previous year navigation buttons - the year does not correctly update. This results in the value not reflecting the users intention.

The official component gallery at material.angular.io exhibits this bug

Demo URL (required)*: https://material.angular.io/components/datepicker/overview#datepicker-views-selection

Detailed Reproduction Steps

1. Scroll down to the 'Datepicker emulating a Year and month picker' example.
2. Click on the Calendar icon to open the date picker.
3. Click on 2022 to go to the 2022 month view.
4. Click the Left hand arrow to change to 2021.
5. Click on January

Explain the expected behavior

Expected behaviour is that the selected value is January 2021, or 01/2021 - reflecting the year shown in the interface.

Explain the current behavior

The selected value has the incorrect year, and remains at the originally selected year. The correct month is selected regardless of which month you pick, but the year does not change.

Discuss the use-case or motivation for changing the existing behavior

The existing behaviour means that the value does not reflect the intended month selection of the user.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 13.1.2
• AngularJS Material: 13.1.1
• OS: Windows 10
• Browsers: Google Chrome 97, Edge 96, Firefox 92
• Screen Readers: NA

Add anything else we should know

I am in the en-GB locale, we use the MM-YYYY syntax for month/year only.

Stack Trace

NA

Screenshots

Reproduced on official component gallery, white circle denotes clicked item.

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

[Splaktar]

Related to #23483.

[zarend]

I can reproduce this.