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 oIgxCalendarModule arquivo de app.module.ts dentro do nosso arquivo.

    Note

    O IgxMonthPickerComponent também depende doBrowserAnimationsModule e opcionalmente doHammerModule para interações por 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/calendar';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Alternativamente,16.0.0 você pode importarIgxMonthPickerComponent como uma dependência independente ou usar oIGX_CALENDAR_DIRECTIVES token 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/calendar';
// 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 Selecter, pode começar a usar oigx-month-picker componente.

    Note

    Note que eleIgxMonthPickerComponent usa a Intl WebAPI para localização e formatação de datas. Considere usar os polyfills apropriados se sua plataforma de alvo 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 paraIgxMonthPickerComponent usar avalue entrada.

    // 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 ligação de dados bidirecional, definangModel assim:

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

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

    Formatting

    Mude o formato de exibição do seletor de mês, usando asformatOptions entradas.

    <!-- 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 alocale entrada para personalizar a localização do 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 subtítulo) 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 mês, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativados:

    @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 precisamos criar um novo tema que estenda ocalendar-theme. Para estilizar os itens do seletor do mês, você pode definir o$content-background parâmetro. Opcionalmente, você também pode definir$header-background se quiser sobrescrever as outras propriedades. Esses dois parâmetros atuam como base para o tema e são usados para gerar automaticamente as cores apropriadas de fundo e primeiro plano para todos os estados de interação, como pairar o cursor, selecionado e ativo.

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #57a5cd,
);

    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

    Styling with Tailwind

    Você pode usarmonth picker nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema. O seletor de mês é estilizado pelo tema do calendário, então você precisa usar a classe utilitária do calendário

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-calendar,dark-calendar.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema do calendário. A sintaxe é a seguinte:

    <igx-month-picker
class="!light-calendar
![--header-background:#4F6A5A]
![--content-background:#A3C7B2]">
</igx-month-picker>
    Note

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, seu coletor de mês deve ficar assim:

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.