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

Question

所以我的问题很简单。我希望在日期选择器上启用特定日期，例如任何月份的最后一天，例如 2019 年 6 月 30 日、2019 年 7 月 31 日

Primng 日期选择器

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

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