• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

339
Views
Rango 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.

ingrese la descripción de la imagen aquí

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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:

ingrese la descripción de la imagen aquí

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error