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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    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
    cmd

    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.

    El IgxMonthPickerComponent también depende de las BrowserAnimationsModule interacciones táctiles y, opcionalmente, del HammerModule for, 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 {}
    typescript

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

    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.

    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>
    html

    Setting date

    Establezca una fecha para IgxMonthPickerComponent usando la entrada value.

    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    typescript
    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [value]="date"></igx-date-picker>
    html

    Para crear un enlace de datos bidireccional, configure ngModel así:

    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [(ngModel)]="date"></igx-date-picker>
    html

    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>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public numericFormatOptions = {
        month: '2-digit'
    };
    typescript

    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>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public locale: 'fr';
    public formatOptions = {
        month: 'long'
    };
    typescript

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    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.
    App Builder | CTA Banner

    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';
    scss

    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: #011627,
      $ym-current-foreground: #ecaa53,
      $ym-hover-background: #ecaa53,
      $navigation-color: #ecaa53,
      $picker-hover-foreground: #d37b08,
      $navigation-hover-color: #d37b08,
      $picker-foreground: #ecaa53,
    );
    scss

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

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

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

    Demo

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    API References

    Theming Dependencies

    Additional Resources

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