question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(MatDatepicker): Expose access to MatCalendar used in MatDatepicker

See original GitHub issue

Feature 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:open
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
crisbetocommented, Dec 29, 2020

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.

0reactions
angular-robot[bot]commented, Apr 1, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found