Descripción general del componente del selector de mes Angular

    El componente Ignite UI for Angular Month Picker proporciona una manera fácil e intuitiva de seleccionar un mes y año específicos usando una vista de calendario mes-año. El componente le permite vincular su valor a un objeto de fecha, y los usuarios pueden cambiar la parte de mes y año del objeto de fecha a través de la interfaz de usuario del componente selector de mes. También admite la localización.

    Angular Month Picker Example

    Lo que ve aquí es un ejemplo básico de Angular Month Picker con la vista predeterminada del componente, que permite a los usuarios seleccionar el año y el mes.

    Getting Started with Ignite UI for Angular Month Picker

    Para comenzar con el componente Ignite UI for Angular Month Picker, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El primer paso es importar IgxCalendarModule dentro de nuestro archivo app.module.ts.

    Note

    El IgxMonthPickerComponent también depende de BrowserAnimationsModule y HammerModule para las interacciones táctiles, por lo que también deben agregarse al AppModule:

    // 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 {}

    Alternativamente, a partir de 16.0.0, puede importar IgxMonthPickerComponent como una dependencia independiente o usar el token IGX_CALENDAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // 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 {}

    Ahora que tiene importado el módulo Ignite UI for Angular Calendar o el componente Selector de meses, puede comenzar a usar el componente igx-month-picker.

    Note

    Tenga en cuenta que IgxMonthPickerComponent utiliza Intl WebAPI para localizar y formatear fechas. Considere utilizar los polyfills adecuados si su plataforma de destino no los admite.

    Using the Angular Month Picker

    Para agregar el selector de mes Angular en una plantilla, use el siguiente código:

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

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

    Setting date

    Establezca una fecha para IgxMonthPickerComponent usando la 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 crear un enlace de datos bidireccional, configure ngModel así:

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

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

    Formatting

    Cambie el formato de visualización del selector de mes mediante las 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

    Utilice la entrada de configuración locale para personalizar la Ignite UI for Angular.

    <!-- 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'
};

    A continuación se muestra un ejemplo de localización y formato del componente selector de meses:

    Navegación por teclado

    • Cuando el componente igxMonthPicker esté enfocado, use

      • Tecla PageUp para pasar al año anterior,
      • Tecla PageDown para pasar al año siguiente,
      • Tecla Inicio para centrar el primer mes del año en curso,
      • Tecla Fin para centrar el último mes del año en curso,
      • Tecla Tab para navegar a través de los botones del subtítulo.

    • Cuando el botón < (anterior) o > (siguiente) año (en el subtítulo) esté enfocado, use

      • Tecla Espacio o Intro para desplazarse y ver el año anterior o siguiente.

    • Cuando el botón de años (en el subtítulo) esté enfocado, use

      • Tecla Espacio o Intro para abrir la vista de años,
      • Tecla de flecha derecha o izquierda para desplazarse hasta la vista del año anterior/siguiente.

    • Cuando un mes dentro de la vista de meses esté enfocado, use

      • Teclas de flecha para navegar por los meses,
      • Tecla de inicio para enfocar el primer mes dentro de la vista de meses,
      • Tecla Fin para enfocar el último mes dentro de la vista de meses,
      • Ingrese la tecla para seleccionar el mes actualmente enfocado y cerrar la vista.
      • Tecla Tab para navegar por los meses.

    Estilismo

    Para comenzar a diseñar el selector de meses, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

    El selector de mes usa el tema del calendario, por lo que tenemos que crear un nuevo tema que extienda el calendar-theme y usar algunos de sus parámetros para diseñar los elementos del selector de mes:

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background-color: #011627,
  $month-current-text-color: #ECAA53,
  $month-hover-background: #ECAA53,
  $year-current-text-color: #ECAA53,
  $year-hover-text-color: #D37B08,
  $picker-arrow-color: #ECAA53,
  $picker-text-hover-color: #D37B08,
  $picker-arrow-hover-color: #D37B08,
  $picker-text-color: #ECAA53
);

    Including themes

    El siguiente paso es incluir el tema del componente en nuestra aplicación.

    Si $legacy-support está configurado en true, incluya el tema del componente así:

     @include calendar($my-calendar-theme);
    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

    :host {
     ::ng-deep {
        @include calendar($my-calendar-theme);
    }
}

    Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

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

    Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

    :host {
    @include css-vars($my-calendar-theme);
}

    Una vez hecho todo, su componente debería verse así:

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.