使用 Primeng Datepicker 如何只启用月份的最后一天？

Question

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

Primng 日期选择器

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

Answer 1

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

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

Answer 2

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

在您的 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 文章如何获取一个月的最后一天和第一天并在控制台中打印月份的值并查看差异。那么你就很容易理解了。

使用 Primeng Datepicker 如何只启用月份的最后一天？

Using Primeng Datepicker how do I only enable the last day of months?

date

datepicker

primeng