Question

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

Primng Datepicker

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

Answer 1

这是您所需要的简单技巧。

在component.html中，当用户更改月份时，请使用最小和最大日期以及(onMonthChange)方法来更新日期的最小和最大值。 把戏使最小和最大日期等于该月的最后一天。

<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文章，了解如何获取一个月的最后一个日期和第一个日期，以及如何在控制台中打印month的值并查看差异。然后，您将轻松理解。

Answer 2

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

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

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

2 个答案: