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.

    El primer paso es importar elIgxCalendarModule interior de nuestro archivo app.module.ts.

    Note

    ​El IgxMonthPickerComponent también depende de yBrowserAnimationsModule​ ​opcionalmente elHammerModule para las interacciones táctiles, por lo que también deben añadirse al AppModule:

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

    Ahora que tienes importado el módulo Ignite UI for Angular Calendar o el componente Month Selecter, puedes empezar a usar eligx-month-picker componente.

    Note

    Ten en cuenta queIgxMonthPickerComponent utiliza la API web internacional para la localización y el formato de fechas. Considera usar los polifills adecuados si tu plataforma objetivo no los soporta.

    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

    Pon una fecha paraIgxMonthPickerComponent usar lavalue 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 crear una vinculación de datos bidireccional, establecengModel así:

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

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

    Formatting

    Cambia el formato de visualización del selector de mes, usando lasformatOptions 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

    Usa lalocale entrada para personalizar la localización de 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'
};

    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< se enfoque el botón (anterior) o> (siguiente) año (en el subtítulo), usa

      • 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 empezar a estilizar el selector de mes, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

    @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 meses usa el tema del calendario, así que tenemos que crear un nuevo tema que amplíe elcalendar-theme. Para estilizar los artículos del selector de mes, puedes establecer el$content-background parámetro. Opcionalmente, también puedes configurar$header-background si quieres anular el resto de propiedades. Estos dos parámetros actúan como base para el tema y se utilizan para generar automáticamente los colores de fondo y primer plano apropiados para todos los estados de interacción, como pasar el cursor, seleccionado y activo.

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

    El archivo de utilidad incluye variantes tantolight comodark de tema. El selector de meses está diseñado a través del tema calendario, así que tienes que usar la clase de utilidad calendario

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