Pesquisa de site

javascript - Como alterar programaticamente o mês no Calendário Material <mat-calendar>

Estou usando o Componente de Calendário Material com uma navegação personalizada que eu construí, que mostra os próximos 5 dias depois que você seleciona uma data no calendário.

Quando você seleciona uma data no elemento personalizado, ele atualiza o Calendário com a nova data selecionada, mas se a data recebida estiver no próximo mês, eu gostaria que o Calendário mudasse para esse mês automaticamente.

HTML :

<mat-calendar [selected]="selectedDate" (selectedChange)="onDateSelected($event)"
  [minDate]="minDate" [dateClass]="dateClass"></mat-calendar>

TS :

@Input() set incomingDate(d: Date) {
    this.selectedDate = d; // sets the incoming date on mat-calendar
    this.dateClass(d); // highlights the next 5 days in the mat-calendar
    this.calendar.updateTodaysDate(); // re-renders calendar to see changes
}

Existe algum método que eu possa vincular ao elemento para resolver este problema? Obrigado!

Resposta #1

Você pode usar _goToDateInView para isso. Isso não mudará o objeto de data, apenas navegará para o mês que você passar como parâmetro, portanto você pode manter sua lógica de seleção de data intacta.

/** Handles year/month selection in the multi-year/year views. */
_goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void;

E aqui está como você poderia usá-lo:

Modelo

<mat-calendar #calendar></mat-calendar>

Componente

@ViewChild('calendar', {static: false}) calendar: MatCalendar<Date>;

public goToDate() {
   this.calendar._goToDateInView(someDateObjectInAnotherMonth, 'month')
}

Stackblitz

Resposta #2

Use [startAt] para pular automaticamente para o mês especificado

    <mat-calendar [minDate]="minDate" 
                  [maxDate]="maxDate" 
                  [startAt]="nextShipmentDt()"
                  [selected]="nextShipmentDt()"></mat-calendar>

Artigos relacionados