Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
PhonicUK opened this issue Jan 7, 2022 · 4 comments · Fixed by #24638
Closed

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

PhonicUK opened this issue Jan 7, 2022 · 4 comments · Fixed by #24638
Labels
area: material/datepicker

Comments

@PhonicUK
Copy link

PhonicUK commented Jan 7, 2022

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.
1
2
3
4
5
@Splaktar
Copy link
Member

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 Splaktar transferred this issue from angular/material Jan 19, 2022
@Splaktar Splaktar added area: material/datepicker needs triage This issue needs to be triaged by the team labels Jan 19, 2022
@Splaktar
Copy link
Member

Related to #23483.

@Splaktar Splaktar changed the title DatePicker does not change selected year when using the left/right arrows with the Year and Month picker bug(datepicker): does not change selected year when using the left/right arrows with the Year and Month picker Jan 20, 2022
@Splaktar Splaktar mentioned this issue Jan 20, 2022
Closed
@Splaktar Splaktar added the Accessibility This issue is related to accessibility (a11y) label Jan 20, 2022
@zarend
Copy link
Contributor

zarend commented Mar 10, 2022

I can reproduce this.

@zarend zarend removed the needs triage This issue needs to be triaged by the team label Mar 10, 2022
zarend added a commit to zarend/components that referenced this issue Mar 21, 2022
@zarend
docs: fix bug in datepicker-views-selection demo
8cb9828 
Fix issue angular#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 angular#24230
@zarend zarend mentioned this issue Mar 21, 2022
Merged
@zarend zarend removed the Accessibility This issue is related to accessibility (a11y) label Mar 21, 2022
@zarend zarend added the has pr label Mar 21, 2022
andrewseguin pushed a commit that referenced this issue Mar 24, 2022
@zarend
docs: fix bug in datepicker-views-selection demo (#24638)
c8d9125 
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
andrewseguin pushed a commit that referenced this issue Mar 24, 2022
@zarend @andrewseguin
docs: fix bug in datepicker-views-selection demo (#24638)
c370ca6 
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

(cherry picked from commit c8d9125)
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@zarend @forsti0506
docs: fix bug in datepicker-views-selection demo (angular#24638)
52837b1 
Fix issue angular#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 angular#24230
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 24, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: material/datepicker
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: fix bug in datepicker-views-selection demo zarend/components
3 participants
@PhonicUK @Splaktar @zarend