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.

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

bug(mat-datepicker): Restrict MatCalendarView #24915

Closed
angelaki opened this issue May 12, 2022 · 13 comments · Fixed by #26652
Closed

bug(mat-datepicker): Restrict MatCalendarView #24915

angelaki opened this issue May 12, 2022 · 13 comments · Fixed by #26652
Assignees
Labels
area: material/datepicker docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions

Comments

@angelaki
Copy link

Feature Description

I'd like to be able to disable some MatCalendarView options.

Use Case

I'm using the picker as a month picker. When changing the view the user get irritated by being able to select a day since the picker usualy closes on month selection (via (monthSelected)).

@angelaki angelaki added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels May 12, 2022
@zarend
Copy link
Contributor

zarend commented May 20, 2022

Hello @angelaki , I think we have instructions for what you are trying to accomplish in Datepicker emulating a Year and month picker
.

Could you please take a look at the above documentation and let us know if the datepicker meets your needs?

Thanks,
Zach

@zarend zarend added the needs: clarification The issue does not contain enough information for the team to determine if it is a real bug label May 20, 2022
@angelaki
Copy link
Author

Hey @zarend in this example you can still toggle to month view, what is a bit irritating:

image

@zarend
Copy link
Contributor

zarend commented May 27, 2022

Interesting, I'm not able to toggle to month view in the Datepicker emulating a Year and month picker example...

How are you able to do that? What steps did you take?

Environment

  • Chrome Version 102.0.5005.61 (Official Build) (x86_64)
  • macOS 12.4 (21F79)

@angelaki
Copy link
Author

Actually quite easy, just click the years:
image

Next you are able to select a day in the month.

@zarend zarend self-assigned this May 31, 2022
@zarend zarend added area: material/datepicker needs investigation A member of the team needs to do further investigation to determine the root cause and removed needs: clarification The issue does not contain enough information for the team to determine if it is a real bug needs triage This issue needs to be triaged by the team labels May 31, 2022
@zarend
Copy link
Contributor

zarend commented May 31, 2022

Thanks for reporting; I can reproduce. This looks to me like an issue with the example, rather than the date-picker itself. I should be able to look into fixing the example later.

@angelaki
Copy link
Author

Actually I don't know what should keep the picker from allowing it. It has an initial view and catches the month selected event. I guess that use-case just isn't supported (yet)?

@angelaki
Copy link
Author

Just saw you also responded to my issue #24914. Guess it's pretty related.

@zarend
Copy link
Contributor

zarend commented Jun 6, 2022

Well, clicking on the period button is supposed to change the view present, but not select anything. The calendar doesn't know that it's not supposed to show the month view in this case. I don't see any quick fix to fix this example.

A work-around for this is to use a custom calendar header. I will follow up with this, but it seems like the built-in header is not designed for being used as a month-year picker, or a year picker.

For now, a work-around is customizing the calendar header. That would be creating a header that handles switching between year and multi-year view, but doesn't switch to month view.

@crisbeto and @mmalerba, do you have context on the intended direction for the month-year picker example? This seems to be more of a limitation of specifically the header to me.

@zarend zarend added good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions and removed feature This issue represents a new feature or feature request rather than a bug or bug fix labels Jun 17, 2022
@zarend zarend changed the title feat(mat-datepicker): Restrict MatCalendarView bug(mat-datepicker): Restrict MatCalendarView Jun 17, 2022
@zarend
Copy link
Contributor

zarend commented Jun 17, 2022

Hello, so I'm triaging this as a bug.

The fix here is to provide a custom header. The header would need

  • appropriate navigation for next/previous on the year and multi-year views.
  • appropriate navigation for switch between year and multi-year view.
  • communicating the current year when in year view and the range of years when in multi-year view

A good place to start is looking at the customizing the calendar header example.

We welcome contributions if you are interested :).

@zarend zarend added docs This issue is related to documentation and removed needs investigation A member of the team needs to do further investigation to determine the root cause labels Jun 17, 2022
@angelaki
Copy link
Author

I'd give it a try. Where to start running the components locally? Forked / cloned https://github.com/angular/components, what's next?

@mmalerba
Copy link
Contributor

You should be able to run our dev app with yarn dev-app and then navigate to http://localhost:4200/examples to see a list of all examples. The code for our datepicker examples lives under src/components-examples/material/datepicker

@csisy
Copy link

csisy commented Nov 28, 2022

+1 for this feature.

Hello @angelaki , I think we have instructions for what you are trying to accomplish in Datepicker emulating a Year and month picker .

Could you please take a look at the above documentation and let us know if the datepicker meets your needs?

Thanks, Zach

The example is a bid awkward. When you click on a month, first the view is changed, then the picker is closed. This causes a flash into the month view before closing. Related issue: #20904

hamzajazyri added a commit to hamzajazyri/components that referenced this issue Feb 19, 2023
add missing encapsulation  to disable pointer-events for periodButtonLabel.

fixes angular#24915
crisbeto pushed a commit that referenced this issue Feb 21, 2023
add missing encapsulation  to disable pointer-events for periodButtonLabel.

fixes #24915
crisbeto pushed a commit that referenced this issue Feb 21, 2023
add missing encapsulation  to disable pointer-events for periodButtonLabel.

fixes #24915

(cherry picked from commit ab6b4bf)
@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 Mar 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/datepicker docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants