angular / angular/components

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

Aperta
#21,462 8 commenti 6 reazioni 0 assegnatari Vedi su GitHub
area: material/datepicker feature P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia individuando i punti di ingresso di MatDatepicker e MatCalendar e verificando come si accede attualmente all’istanza del calendario tramite membri privati. Definisci un percorso di accesso pubblico supportato che funzioni quando il datepicker è aperto e rimanga affidabile con l’interfaccia touch. Il lavoro sarà considerato completato quando i consumer potranno aggiornare lo stato del calendario senza dipendere da membri privati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.