Visão geral do componente Angular Month Picker

    O componente Ignite UI for Angular Month Picker fornece uma maneira fácil e intuitiva de selecionar um mês e ano específicos usando uma visualização de calendário mês-ano. O componente permite que você vincule seu valor a um objeto de data, e os usuários podem alterar a parte do mês e do ano do objeto de data por meio da UI do componente seletor de mês. Ele também oferece suporte à localização.

    Angular Month Picker Example

    O que você vê aqui é um exemplo básico Angular Month Picker com uma visualização padrão do componente, permitindo que os usuários selecionem o ano e o mês.

    Getting Started with Ignite UI for Angular Month Picker

    Para começar a usar o componente Ignite UI for Angular Month Picker, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O primeiro passo é importar o IgxCalendarModule dentro do nosso arquivo app.module.ts.

    Note

    O IgxMonthPickerComponent também depende do BrowserAnimationsModule e, opcionalmente, do HammerModule para interações de toque, então eles precisam ser adicionados ao AppModule também:

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxMonthPickerComponent como uma dependência autônoma ou usar o token IGX_CALENDAR_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxMonthPickerComponent } from 'igniteui-angular';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-month-picker></igx-month-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}

    Agora que você importou o módulo Ignite UI for Angular Calendar ou o componente Month Picker, você pode começar a usar o componente igx-month-picker.

    Note

    Observe que o IgxMonthPickerComponent usa o Intl WebAPI para localização e formatação de datas. Considere usar os polyfills apropriados se sua plataforma de destino não os suportar.

    Using the Angular Month Picker

    Para adicionar o Angular Month Picker em um modelo, use o seguinte código:

    <!-- month-picker-sample.component.html -->

<igx-month-picker></igx-month-picker>

    Setting date

    Defina uma data para IgxMonthPickerComponent usando a entrada value.

    // month-picker-sample.component.ts

public date: Date = new Date();

    <!-- month-picker-sample.component.html -->

<igx-month-picker [value]="date"></igx-date-picker>

    Para criar uma vinculação de dados bidirecional, defina ngModel assim:

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date"></igx-date-picker>

    Formatting

    Altere o formato de exibição do seletor de mês usando as entradas formatOptions.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public numericFormatOptions = {
    month: '2-digit'
};

    Localization

    Use a entrada locale para personalizar a Ignite UI for Angular Month Picker.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};

    Aqui está um exemplo de localização e formatação do componente seletor de mês:

    Navegação pelo teclado

    • Quando o componente igxMonthPicker estiver focado, use

      • Tecla PageUp para ir para o ano anterior,
      • Tecla PageDown para avançar para o próximo ano,
      • Tecla Home para focar o primeiro mês do ano atual,
      • Tecla End para focar o último mês do ano atual,
      • Tecla Tab para navegar pelos botões do subcabeçalho.

    • Quando o botão < (anterior) ou > (próximo) ano (no subcabeçalho) estiver focado, use

      • Pressione a tecla Espaço ou Enter para rolar e visualizar o ano seguinte ou anterior.

    • Quando o botão anos (no subcabeçalho) estiver em foco, use

      • Tecla de espaço ou Enter para abrir a visualização de anos,
      • Tecla de seta para a direita ou para a esquerda para rolar o ano anterior/seguinte para a visualização.

    • Quando um mês dentro da visualização de meses estiver focado, use

      • Teclas de seta para navegar pelos meses,
      • Tecla Home para focar o primeiro mês dentro da visualização de meses,
      • Tecla End para focar o último mês dentro da visualização de meses,
      • Tecla Enter para selecionar o mês atualmente em foco e fechar a visualização,
      • Tecla Tab para navegar pelos meses.

    Estilização

    Para começar a estilizar o seletor de meses, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    O seletor de mês usa o tema do calendário, então temos que criar um novo tema que estenda o calendar-theme e usar alguns de seus parâmetros para estilizar os itens do seletor de mês:

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background: #011627,
  $ym-current-foreground: #ecaa53,
  $ym-hover-background: #ecaa53,
  $navigation-color: #ecaa53,
  $picker-hover-foreground: #d37b08,
  $navigation-hover-color: #d37b08,
  $picker-foreground: #ecaa53,
);

    O próximo passo é incluir o tema do componente em nosso aplicativo.

    @include css-vars($my-calendar-theme);

    Depois que tudo estiver pronto, seu componente deverá ficar assim:

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.