使用 Primeng Datepicker 如何仅启用月份的最后一天？答案

【问题标题】：Using Primeng Datepicker how do I only enable the last day of months?使用 Primeng Datepicker 如何仅启用月份的最后一天？
【发布时间】：2019-05-09 05:01:03
【问题描述】：

所以我的问题很简单。我想在日期选择器上启用特定日期，例如任何一个月的最后一天，例如 30/06/2019、31/07/2019

启动日期选择器

<p-calendar formControlName="date"></p-calendar>

【问题讨论】：

标签： date datepicker primeng

【解决方案1】：

这是满足您要求的简单技巧。

在您的 component.html 中，当用户更改月份时，使用最小和最大日期以及 (onMonthChange) 方法更新 min 和 max 日期值。 诀窍就是让最小和最大日期等于该月的最后一天。

<p-calendar [(ngModel)]="value" tabindex="0" [maxDate]="maxDateValue" 
    [minDate]="minDateValue" readonlyInput="true" 
    (onMonthChange)="onMonthChange($event)">
</p-calendar>

并且在 component.ts 文件中使用以下代码：

public maxDateValue: Date;
public minDateValue: Date;

ngOnInit() {
    this.setMinMaxDate();
}

setMinMaxDate() {
    var nowdate = new Date();
    this.maxDateValue = new Date(nowdate.getFullYear(), nowdate.getMonth() + 1, 0);
    this.minDateValue = new Date(nowdate.getFullYear(), nowdate.getMonth() + 1, 0);
}

// method to handle month change.
onMonthChange(e:any) {
    this.minDateValue = new Date(e.year, e.month, 0);
    this.maxDateValue = new Date(e.year, e.month, 0);
}

你一定在想为什么在初始化时我使用nowdate.getMonth() + 1，但在onMonthChange内部只使用e.month，而不是加+1。

您需要阅读这篇find last and first date of month 文章如何获取一个月的最后一个日期和第一个日期并在控制台中打印月份的值并查看差异。那么你就很容易理解了。

【讨论】：

【解决方案2】：

如果你只需要每个月的一天，你应该使用月视图

<p-calendar [(ngModel)]="dateValue"
  view="month" dateFormat="mm/yy" 
  [yearNavigator]="true" 
  yearRange="2000:2030"></p-calendar>

【讨论】：

我使用的是primeng 5版本。其中不支持查看月份。任何替代解决方案？
@SVK 我认为它在版本 5 中也支持，您可以在此链接中找到相同的内容 primefaces.org/primeng-5.2.7/#/calendar
如果 SVK 的解决方案由于版本问题而不起作用。请看另一种解决方法。
不，它在 5.2.7 中不支持