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.
Ejemplo de selector de meses Angular
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.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con 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
cmd
Para obtener una introducción completa al 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 ha importado el módulo Calendario Ignite UI for Angular o el componente Selector de meses, puede empezar a utilizar el igx-month-picker
componente.
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.
Cómo usar el selector de meses Angular
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>
html
Fecha de configuración
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
Formateo
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
Localización
Utilice la locale
entrada para personalizar la localización del selector de Ignite UI for Angular meses.
<!-- 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:
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.
Estilo
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í: