Descripción general del componente del selector de Angular meses

    El componente Selector de Ignite UI for Angular meses proporciona una manera fácil e intuitiva de seleccionar un mes y un año específicos mediante una vista de calendario de mes y año. El componente permite enlazar su valor a un objeto de fecha, y los usuarios pueden cambiar la parte del mes y el año del objeto de fecha a través de la interfaz de usuario del componente del selector de meses. También es compatible con la localización.

    Angular Month Picker Example

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

    Getting Started with Ignite UI for Angular Month Picker

    Para empezar a utilizar el componente Selector de Ignite UI for Angular meses, 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 al Ignite UI for Angular, lea el tema de introducción.

    The first step is to import the IgxCalendarModule inside our app.module.ts file.

    Note

    The IgxMonthPickerComponent also depends on the BrowserAnimationsModule and optionally the HammerModule for touch interactions, so they need to be added to the AppModule as well:

    // 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 puedes importarlosIgxMonthPickerComponent como una dependencia independiente, o usar elIGX_CALENDAR_DIRECTIVES token 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/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 {}

    Now that you have the Ignite UI for Angular Calendar module or Month Picker component imported, you can start using the igx-month-picker component.

    Note

    Note that the IgxMonthPickerComponent uses the Intl WebAPI for localization and formatting of dates. Consider using the appropriate polyfills if your target platform does not support them.

    Using the Angular Month Picker

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

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

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

    Setting date

    Set a date to IgxMonthPickerComponent using the value input.

    // month-picker-sample.component.ts

public date: Date = new Date();

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

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

    To create a two-way data-binding, set ngModel like this:

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

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

    Formatting

    Change the month picker display format, using the formatOptions inputs.

    <!-- 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 the locale input, to customize the Ignite UI for Angular Month Picker localization.

    <!-- 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.

    • When < (previous) or > (next) year button (in the sub-header) is focused, 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

    To get started with styling the month picker, we need to import the index file, where all the theme functions and component mixins live:

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

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

    The month picker uses the calendar's theme, so we have to create a new theme that extends the calendar-theme. To style the month picker's items, you can set the $content-background parameter. Optionally, you can also set $header-background if you want to override the rest of the properties. These two parameters act as the foundation for the theme and are used to automatically generate the appropriate background and foreground colors for all interaction states, such as hover, selected, and active.

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

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

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

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

    Demo

    Styling with Tailwind

    Puedes decorarlosmonth picker usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

    The utility file includes both light and dark theme variants. The month picker is styled through the calendar theme, so you have to use the calendar utility class

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-calendar,dark-calendar.

    Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

    Puedes encontrar la lista completa de propiedades en el tema del calendario. La sintaxis es la siguiente:

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

    El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    Al final de tu recolector de meses debería verse así:

    API References

    Theming Dependencies

    Additional Resources

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