feat(MatDatepicker): Expose access to MatCalendar used in MatDatepicker
See original GitHub issueFeature Description
Expose access to MatCalendar instance that is created under the hood when using datepicker.
Use Case
I have requirement to allow user to type into the input date in proper format, and if datepicker is opened, it should update its state by showing typed in date. This is not possible using current api state. What I do now, is a nasty hacking - accessing private members of datepicker.
so, in my component, I have to
get calendar(): MatCalendar<Date> | undefined {
// this is soooo baaad and soo hacky to get that calendar instance......
// moreover, calendar can actually be null - when its closed.
// @ts-ignore
return this.datepicker._popupComponentRef?.instance._calendar;
}
this.myInputField.valueChanges.pipe(filter(v => v), debounceTime(250)).subscribe(v => {
const calendar = this.calendar;
// console.log('dp', this.datepicker);
// console.log('cal', this.calendar);
//sooooooooo much haaaaaaaaaaaxing
if (calendar) {
calendar.activeDate = v;
}
I think its perfectly valid to manipulate calendar state from the component code. This will obviously stop working when I swtich to touchUI. Therfore, API that provides reliable way to access calendar would be even more convinient.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Datepicker | Angular Material
Container that can be used to project a row of action buttons to the bottom of a datepicker or date range picker. Selector:...
Read more >use mat-datepicker directly without input - Stack Overflow
turns out this is pretty straightforward import the MatDatePickerModule as per usual and then simply use the mat-calendar selector
Read more >@angular/material: Versions | Openbase
fixup! feat(material/dialog): Switch dialog implementation to use MDC ... have been removed from the MatDatepicker and MatDateRangePicker constructors.
Read more >mat-date-picker in Angular Material - GeeksforGeeks
After completing the installation, Import ' MatDatepickerModule,' from '@angular/material' in the app.module.ts file. Then use <mat-datepicker- ...
Read more >Angular Material Datepicker: Complete Guide
an input text field, used to type in the date manually ... Notice the use of the [matDatepicker] directive, that links the input...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This sounds reasonable, although as you mentioned, the calendar being null while it’s closed is a little weird. I’m not sure I follow the use case that you’re describing though. The calendar should be set up to reflect the date that’s been typed into the input already.
Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.