Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente de calendario en angular ngx bootstrap.
Componente de calendario: Se utiliza para mes a mes
Propiedades:
- defaultDate: Se utiliza para establecer la fecha predeterminada para resaltar en la primera apertura si el campo está en blanco.
- SelectionMode: Se utiliza para definir la cantidad de la selección, los valores válidos son «simple», «múltiple» y «rango».
- style: Se utiliza para dar el estilo Inline del componente.
- styleClass: Es la clase Style del componente.
- inputStyle: se utiliza para establecer el estilo en línea del campo de entrada.
- inputStyleClass: se utiliza para establecer la clase de estilo del campo de entrada.
- inputId: es un identificador de ID del elemento de entrada subyacente.
- nombre: Se utiliza para establecer el Nombre del elemento de entrada.
- marcador de posición: se utiliza para establecer el texto del marcador de posición para la entrada.
- Deshabilitado: Se utiliza para deshabilitar la casilla de verificación.
- dateFormat: se utiliza para establecer el formato de la fecha, que también se puede definir en la configuración regional.
- en línea: se utiliza para mostrar el calendario en línea. El valor predeterminado es falso para el modo emergente.
- showOtherMonths: Se utiliza para mostrar fechas en otros meses (no seleccionables) al inicio o al final del mes actual.
- showIcon: Se utiliza para mostrar un botón con un icono al lado de la entrada.
- showOnFocus: se utiliza para establecer el foco en el componente.
- showWeek: Se utiliza para mostrar los números de semana.
- Icono: Se utiliza para el icono del botón de calendario.
- appendTo: esta propiedad toma la ID del elemento al que se agrega la superposición.
- readonlyInput: Se utiliza para evitar ingresar la fecha manualmente con el teclado.
- shortYearCutoff: Se utiliza para mostrar el año de corte para determinar el siglo de una fecha.
- minDate: Se utiliza para mostrar la fecha mínima seleccionable.
- maxDate: Se utiliza para mostrar la fecha máxima seleccionable.
- disabledDates: Se utiliza para mostrar el arreglo con fechas que deben estar deshabilitadas (no seleccionables).
- disabledDays: se utiliza para mostrar el arreglo con los números de los días de la semana que deben estar deshabilitados (no seleccionables).
- monthNavigator: se utiliza para mostrar si el mes debe representarse como un menú desplegable en lugar de texto.
- yearNavigator: se utiliza para mostrar si el año debe representarse como un menú desplegable en lugar de texto.
- yearRange: se utiliza para mostrar el rango de años que se muestra en el menú desplegable de años en formato (nnnn:nnnn) como (2000:2020).
- showTime: se utiliza para mostrar el selector de tiempo de visualización.
- hourFormat: Se utiliza para especificar un formato de 12 o 24 horas.
- locale: Se utiliza para mostrar un objeto que tiene propiedades de configuración regional para el calendario.
- timeOnly: se utiliza para mostrar solo el selector de tiempo de visualización.
- timeSeparator: Se utiliza para mostrar el separador del selector de tiempo.
- dataType: es el tipo del valor para volver a escribir en ngModel, el valor predeterminado es la fecha y la alternativa es una string.
- requerido: se utiliza para especificar que se debe completar un campo de entrada antes de enviar el formulario.
- Tabindex: se utiliza para establecer el índice del elemento en orden de tabulación.
- ariaLabelledBy: Es la propiedad ariaLabelBy que establece relaciones entre el componente y la(s) etiqueta(s) donde su valor debe ser uno o más ID de elementos.
- showSeconds: se utiliza para especificar si mostrar los segundos en el selector de tiempo.
- stepHour: Se utiliza para especificar Horas a cambiar por paso.
- stepMinute: Se utiliza para especificar Minutos a cambiar por paso.
- stepSecond: se utiliza para especificar segundos para cambiar por paso.
- maxDateCount: se utiliza para especificar un número máximo de fechas seleccionables en múltiples modos.
- showButtonBar: se utiliza para especificar si mostrar hoy y borrar botones en el pie de página.
- todayButtonStyleClass: Se utiliza para especificar la clase de estilo del botón de hoy.
- clearButtonStyleClass: Se utiliza para especificar la clase de Estilo del botón borrar.
- baseZIndex: se utiliza para especificar el valor de Base zIndex para usar en capas.
- autoZIndex: Se utiliza para especificar si se gestionan automáticamente las capas.
- panelStyleClass: Se utiliza para especificar la clase Style del elemento contenedor datetimepicker.
- panelStyle: se utiliza para establecer el estilo Inline del elemento contenedor datetimepicker.
- keepInvalid: se utiliza para mantener valores no válidos cuando la entrada está borrosa.
- hideOnDateTimeSelect: se utiliza para especificar si ocultar la superposición en la selección de fecha.
- numberOfMonths: Se utiliza para especificar el número de meses a mostrar.
- vista: Se utiliza para especificar el tipo de vista a mostrar.
- multipleSeparator: se utiliza para especificar Separator para el modo de selección múltiple.
- rangeSeparator: se utiliza para especificar Separator para unir las fechas de inicio y finalización en el modo de selección de rango.
- touchUI: se utiliza para especificar una superposición de calendario que se muestra optimizada para dispositivos táctiles.
- focusTrap: se utiliza para especificar solo el enfoque en los elementos dentro del calendario.
- showTransitionOptions: se utiliza para establecer las opciones de transición de la animación del espectáculo.
- hideTransitionOptions: se utiliza para establecer las opciones de transición de la animación oculta.
- firstDayOfWeek: se utiliza para definir el primero de la semana para varios cálculos de fecha.
Eventos:
- onSelect: especifica una devolución de llamada para invocar cuando se selecciona una fecha. Tenga en cuenta que este evento no se llama cuando el valor se ingresa manualmente desde la entrada.
- onBlur: especifica una devolución de llamada para invocar en el desenfoque de un campo de entrada.
- onFocus: especifica una devolución de llamada para invocar en el foco del campo de entrada.
- onClose: especifica una devolución de llamada para invocar cuando se cierra el panel del selector de fechas.
- onShow: especifica una devolución de llamada para invocar cuando el panel del selector de fechas está visible.
- onClickOutside: especifica una devolución de llamada para invocar al hacer clic fuera del panel del selector de fecha.
- onInput: especifica una devolución de llamada para invocar cuando se escribe el campo de entrada.
- onTodayClick: especifica una devolución de llamada para invocar cuando se hace clic en el botón hoy.
- onClearClick: especifica una devolución de llamada para invocar cuando se hace clic en el botón borrar.
- onMonthChange: Especifica una devolución de llamada para invocar cuando se cambia un mes usando los navegadores.
- onYearChange: Especifica una devolución de llamada para invocar cuando se cambia un año usando los navegadores.
Estilo:
- p-calendar: Especifica el elemento contenedor principal.
- p-calendar-w-btn: Especifica el elemento contenedor principal cuando un botón está habilitado.
- p-calendar-timeonly: especifica el elemento contenedor principal en el modo de solo selector de tiempo.
- p-inputtext: Especifica un elemento de entrada.
- p-datepicker: Especifica el elemento Datepicker.
- p-datepicker-inline: Especifica el elemento Datepicker en modo inline.
- p-datepicker-monthpicker: Especifica el elemento Datepicker en la vista de mes.
- p-datepicker-touch-p: Especifica el elemento Datepicker en modo touch p.
- p-datepicker-calendar: Especifica una tabla que contiene fechas de un mes.
- p-datepicker-current-day: Especifica la celda de la fecha seleccionada.
- p-datepicker-today: Especifica la celda de la fecha de hoy.
Plantillas:
- date $implícito: Es un valor del componente.
Métodos:
- alternar: Esto ayuda a alternar la visibilidad del calendario.
Formatos de fecha:
- d: Día del mes (sin cero inicial)
- dd: Día del mes (dos dígitos)
- o: Día del año (sin ceros iniciales)
- oo: Día del año (tres dígitos)
- D: nombre del día en forma abreviada
- DD: nombre del día en forma larga
- m: Mes del año (sin cero inicial)
- mm: mes del año (dos dígitos)
- M: nombre del mes en forma abreviada
- MM: nombre del mes en forma larga
- y: año (dos dígitos)
- aa: año (cuatro dígitos)
- @: marca de tiempo de Unix (ms desde el 01/01/1970)
- !: Marcas de Windows (100 ns desde el 01/01/0001)
- ‘…’: Texto literal
- ” : comilla simple
- cualquier otra cosa: texto literal
Creación de aplicaciones angulares e instalación de módulos:
- Paso 1: Cree una aplicación Angular usando el siguiente comando.
ng new appname
- Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
cd appname
- Paso 3: Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto : Se verá como lo siguiente.
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de calendario
app.component.html
<h2>GeeksforGeeks</h2> <h4>PrimeNg Calendar Component</h4> <p-calendar [inline]="true" [showWeek]="true"></p-calendar>
- aplicación.módulo.ts
Javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from
"@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CalendarModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {}
Producción:
Ejemplo 2: utilizaremos un calendario de estilo emergente.
app.component.html
<div class="p-fluid p-grid p-formgrid"> <div class="p-field p-col-12 p-md-4"> <label>Basic</label> <p-calendar></p-calendar> </div> <div class="p-field p-col-12 p-md-4"> <label>Calendar with Time</label> <p-calendar [showTime]="true"></p-calendar> </div> </div>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CalendarModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
- aplicación.componente.ts
Javascript
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/calendar