Sélection de date multiple dans le sélecteur de date du matériau (angulaire)

Question

J'ai une exigence qu'un utilisateur puisse sélectionner plusieurs dates dans un sélecteur de dates. Comment puis-je implémenter plusieurs fonctionnalités de sélection de date dans un sélecteur de date Angular Material date)?

J'ai essayé cela via dateClass . Mais, après chaque sélection de date, le sélecteur de date sera fermé.

Voici ce que j'ai essayé

Code HTML:

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

Code TypeScript:

dateClass = (d: Date) => {
    const date = d.getDate();

    // Highlight the 1st and 20th day of each month.
    return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ? 'example-custom-date-class' : undefined;
}

Answer 1

Une autre façon (un peu hack): StackBlitz

Juste réécriture temporaire de la méthode close en fonction vide, et la renvoyer après la modification. Appelant également la fonction de relecture en semaine. Solution non sûre et idéale, mais fonctionne.

Cela pourrait être utile pour quelqu'un.