PrimeNG 日历自定义年份范围

Answer 1

将以下样式添加到您的 CSS 中：

p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year {
    width: 33.3%;
}

如果它不能立即起作用，请尝试在选择器的开头添加

::ng-deep

：

::ng-deep p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year {

如果还是不行，请添加

!important

：

width: 33.3% !important;

这应该是结果：

注意： 不同版本的 PrimeNG 之间的元素结构可能有所不同，因此如果它不起作用，请告诉我您正在使用哪个版本。另外，如果您更新 PrimeNG 版本，您可能需要对 CSS 进行更改。

---

编辑：不幸的是，列表中出现的年份数目前硬编码为 10。这可以在方法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;
}

您可以在他们的 GitHub 页面上打开一个问题，并要求他们添加一个输入。

Answer 2

你可以做到这一点。我正在使用

viewChildren

。您也可以使用

viewChild

。这样，您必须在

ngAfterViewInit

钩子内使用该实例并执行下面的操作

@ViewChildren(Calendar) calendarInstances!: QueryList<Calendar>; 


this.calendarInstances.forEach((instance) => {           
   instance.yearPickerValues = function () { 
         let yearPickerValues = []; 
         let base = <number>this.currentYear - (<number>this.currentYear % 12);                  
         for (let i = 0; i < 12; i++) {
           yearPickerValues.push(base + i);                 }                
           return yearPickerValues; 
    }; 
});