angular / angular/components

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

Offen
#21,462 8 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/datepicker feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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 | 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die MatDatepicker- und MatCalendar-Einstiegspunkte zu lokalisieren und zu prüfen, wie derzeit über private Member auf die Kalenderinstanz zugegriffen wird. Definiere einen unterstützten öffentlichen Zugriffsweg, der funktioniert, wenn der Datepicker geöffnet ist, und mit der Touch-UI zuverlässig bleibt. Als erledigt gilt die Aufgabe, wenn Consumer den Kalenderstatus aktualisieren können, ohne sich auf private Member zu verlassen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.