Tengo un elemento de calendario p que funciona correctamente, pero tiene un molesto error de interfaz de usuario que permite al usuario hacer clic en un año fuera del rango de año. No pueden seleccionar un día en un año fuera de yearRange, como se esperaba, pero cuando hacen clic en el menú desplegable del año desde una fecha fuera de yearRange, el yearRange en el menú desplegable es diferente. (por ejemplo, si el rango de año original es 2016:2022 y el usuario selecciona diciembre de 2022 y luego hace clic en la flecha hasta enero de 2023, cuando haga clic en el menú desplegable del año ahora verá 2022-2028)
<p-calendar name="arrivedate" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2016:2022" formControlName="arrivedateCtrl" dateFormat="yy/mm/dd" placeholder="{{requireText}}" readonlyInput="readonlyInput" [locale]="calLanObj"> </p-calendar>Estoy tratando de encontrar una manera de no permitir que el usuario haga clic en las flechas para un año fuera del rango de año, o que cuando haga clic en el menú desplegable del año desde una fecha fuera del rango, verá el rango de año original en el menú desplegable.
¿Algunas ideas?
Gracias
No hay una forma intencionada de hacer esto. Así que tus opciones son:
Haga una solicitud a los desarrolladores en los problemas de github: https://github.com/primefaces/primeng/issues
Tome el código fuente de github y modifíquelo según lo desee; incluso podría fusionarlo con el producto principal ya que primeng es de código abierto: https://github.com/primefaces/primeng/tree/master/src /aplicación/componentes/calendario
Utilice este truco janky :
Agregaremos detectores de eventos para onYearChange y onMonthChange . Además, una identificación de plantilla para que podamos usar ViewChild para hacer algunas cosas cuestionables.
<p-calendar #calendar [(ngModel)]="date" [showIcon]="true" [minDate]="minDate" [maxDate]="maxDate" (onYearChange)="checkYear($event)" (onMonthChange)="checkYear($event)" > </p-calendar> Eliminé la propiedad obsoleta yearRange y minDate y maxDate en su lugar.
Luego agregaremos una función para verificar que el año esté dentro de nuestros límites cuando el usuario lo cambie. Usaremos @ViewChild para acceder a todas las funciones y variables que no debemos . A través de prueba y error, descubrí que llamar a la función onModelTouched() y luego restablecer nuestro valor de fecha actualizará la fecha en el calendario.
import { Component, OnInit, ViewChild } from '@angular/core'; import { Calendar } from 'primeng/calendar'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'], }) export class TestComponent implements OnInit { @ViewChild('calendar') calendar?: Calendar; minDate = new Date(1451624400000); //Jan 1 2016 maxDate = new Date(1672462800000); //Dec 31 2022 date = new Date(); constructor() {} ngOnInit(): void {} checkYear(date: { month: number; year: number }) { if (this.calendar) { if (date.year < 2016) { this.calendar.onModelTouched(); this.date = new Date(this.minDate); } if (date.year > 2022) { this.calendar.onModelTouched(); this.date = new Date(this.maxDate); } } } } Si el usuario elige una fecha que no está dentro de nuestro rango, la establecemos en el valor mínimo o máximo. Necesitamos asegurarnos de establecer la fecha usando new Date() para garantizar que la detección de cambios se active cada vez.
Tenga en cuenta que esto está utilizando el componente de forma no intencional, por lo que no hay garantía de que no se rompa en futuras versiones.
Stackblitz: https://stackblitz.com/edit/angular-ivy-emw3ge?file=src/app/test/test.component.ts