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

【问题标题】：Prime ng Calendar year range changes when clicking arrows to year outside of range当单击箭头到超出范围的年份时，Prime ng 日历年份范围会发生变化
【发布时间】：2022-02-08 15:04:32
【问题描述】：

我有一个正常工作的 p 日历元素，但它有一个烦人的 ui 错误，允许用户单击 yearRange 之外的一年。正如预期的那样，他们无法选择 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 之外的年份，要么当他们从范围之外的日期单击年份下拉菜单时，他们将看到原始 yearRange下拉菜单。

有什么想法吗？

谢谢

【问题讨论】：

标签： javascript html angular primeng

【解决方案1】：

没有有意的方法来做到这一点。所以你的选择是：

在 github 问题中向开发者提出请求：https://github.com/primefaces/primeng/issues
从 github 获取源代码并将其修改为您想要的 - 您甚至可以将其合并到主要产品中，因为primeng 是开源的：https://github.com/primefaces/primeng/tree/master/src/app/components/calendar
使用这个 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() 设置日期，以确保每次都会触发更改检测。

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

Stackblitz：https://stackblitz.com/edit/angular-ivy-emw3ge?file=src/app/test/test.component.ts

【讨论】：