当单击箭头到超出范围的年份时，Priming日历的年份范围会发生变化

Question

我有一个p-calendar元素，它工作正常，但它有一个烦人的ui错误，允许用户单击yearRange之外的年份。他们不能像预期的那样选择yearRange之外的一年中的某一天，但当他们从yearRange以外的日期单击年份下拉列表时，下拉列表中的yearRange是不同的。(例如，如果原始年份范围为2016:2022，用户选择2022年12月，然后单击箭头至2023年1月，当他们单击年份下拉菜单时，他们现在将看到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>

我试图找到一种方法，要么不允许用户单击指向yearRange之外年份的箭头，要么当他们从该范围之外的日期单击年份下拉列表时，他们将在下拉列表中看到原始年份range。

有什么想法吗？

感谢

Answer 1

没有想要的方法。所以你的选择是：

1. 在github问题中向开发者发出请求：https://github.com/primefaces/primeng/issues

2. 从github中获取源代码并将其修改为您想要的内容-由于priming是开源的，您甚至可以将其合并到主产品中：https://github.com/primefaces/primeng/tree/master/src/app/components/calendar

3. 使用此janky破解：

我们将为onYearChange和onMonthChange添加事件侦听器。还有一个模板id，这样我们就可以使用ViewChild来做一些有问题的事情。

<p-calendar
#calendar
[(ngModel)]="date"
[showIcon]="true"
[minDate]="minDate"
[maxDate]="maxDate"
(onYearChange)="checkYear($event)"
(onMonthChange)="checkYear($event)"
>
</p-calendar>

我已经删除了不推荐使用的属性yearRange，而是使用minDate和maxDate。

然后，我们将添加一个函数来检查用户更改年份时年份是否在我们的范围内。我们将使用@ViewChild访问所有我们不应该访问的函数和变量。通过反复尝试，我发现调用onModelTouched()函数，然后重置我们的日期值，会更新日历中的日期。

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);
}
}
}
}

如果用户选择的日期不在我们的范围内，我们会将其设置为最小值或最大值。我们需要确保使用new Date()设置日期，以确保每次都会触发更改检测。

请记住，这是以一种无意的方式使用该组件，因此不能保证它在未来的版本中不会损坏。

堆叠闪电战：https://stackblitz.com/edit/angular-ivy-emw3ge?file=src/app/test/test.component.ts