angular / angular/components

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

Ouverte
#21,462 8 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
area: material/datepicker feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par localiser les points d’entrée de MatDatepicker et MatCalendar et examinez comment l’instance du calendrier est actuellement accessible via des membres privés. Définissez un chemin d’accès public pris en charge qui fonctionne lorsque le datepicker est ouvert et reste fiable avec l’interface tactile. La tâche sera considérée comme terminée lorsque les consommateurs pourront mettre à jour l’état du calendrier sans dépendre de membres privés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.