0
397
VistasRango de año personalizado del calendario PrimeNG
Estoy tratando de rediseñar el componente PrimeNG Calendar.
Me gustaría hacer mi encabezado personalizado y un rango de años personalizado.
<p-calendar [formControl]="control"> <ng-template pTemplate="header"> <div>Custom header</div> </ng-template> </p-calendar>Si uso esta proyección de contenido, obtengo una nueva línea de encabezado, pero no sobrescribo el encabezado de origen. Me gustaría mostrar los años en 3 columnas. Cuando sobrescribo estilos, obtengo 3 columnas, pero para 3 columnas necesito 12 años en lugar de 10. En la documentación está el parámetro década, pero no sé cómo usarlo.
1 Respuestas
Responde la pregunta0
Agregue el siguiente estilo a su CSS:
p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year { width: 33.3%; } Si no funciona de inmediato, intente agregar ::ng-deep al comienzo del selector:
::ng-deep p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year { Si todavía no funciona, agregue !important :
width: 33.3% !important;Este debería ser el resultado:
Nota: La estructura de los elementos puede diferir entre las diferentes versiones de PrimeNG, por lo que si no funciona, avíseme qué versión está utilizando. Además, si actualiza la versión de PrimeNG, es posible que deba realizar cambios en el CSS.
Editar: Desafortunadamente, la cantidad de años que aparecen en la lista actualmente está codificada para que sea 10. Esto se puede ver en este archivo en el método yearPickerValues() :
yearPickerValues() { let yearPickerValues = []; let base = this.currentYear - (this.currentYear % 10); for (let i = 0; i < 10; i++) { // <-- here yearPickerValues.push(base + i); } return yearPickerValues; }Puede abrir un problema en su página de GitHub y pedirles que agreguen una entrada tal vez.