使用primeng日历将样式应用于特定日期答案

【问题标题】：apply style to specific dates with primeng calendar使用primeng日历将样式应用于特定日期
【发布时间】：2018-10-03 22:47:23
【问题描述】：

是否可以使用 prime ng 的日历将样式应用于特定日期？

我想做

<p-calendar [datesToStyle]="arrayOfDates"></p-calendar>

【问题讨论】：

标签： angular primeng

【解决方案1】：

目前 Primeng 不提供直接数组映射，因为它用于禁用特定日期。

但我想出了一个解决方案。我创建了一个数组，其中包含我想在日历中突出显示的日期列表。在准备这个数组时，我使用 date.setHours(0,0,0,0) 从日期中删除了时间部分。

invalidDates: Array<Date> = new Array<Date>();

在具有 p-calendar 的 HTML 中，我添加了一个 if-else 条件，用于突出显示数组中存在的日期。

<p-calendar [ngModelOptions]="{standalone: true}" id="dateFrom"  [maxDate]="dateTo" name="dateFrom" [(ngModel)]="dateFrom" >
    <ng-template pTemplate="date" let-date>
        <div *ngIf="checkDateForHoliday(date);then highlightedDate else normalDate"></div>
        <ng-template #highlightedDate>
            <span [ngStyle]="{backgroundColor: '#ff4d4d'}" style="border-radius:75%">{{date.day}}</span>
        </ng-template>
        <ng-template #normalDate>
                <span [ngStyle]="{backgroundColor: 'inherit'}" style="border-radius:75%">{{date.day}}</span>
        </ng-template>

    </ng-template>
</p-calendar>

下面是 checkDateForHoliday 和 isInArray 方法的定义。

checkDateForHoliday(date:any){
    var calendarDate = new Date(date.year,date.month,date.day);
    calendarDate.setHours(0,0,0,0);
    return this.isInArray(calendarDate);
  }

  isInArray(value:Date) {
    return !!this.invalidDates.find(item => {
      return item.getTime() == value.getTime()});
  }

确保您正在准备的日期数组（在我的情况下为无效日期）不应该有时间部分。使用上面提到的 setHours 方法。

【讨论】：

【解决方案2】：

查看日历文档中的日期模板

<div class="ui-g-12 ui-md-4">
    <h3>Date Template</h3>
    <p-calendar [(ngModel)]="date10">
        <ng-template pTemplate="date" let-date>
            <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#7cc67c' : 'inherit'}" style="border-radius:50%">{{date.day}}</span>
        </ng-template>
    </p-calendar>
</div>

【讨论】：

推荐这种方式！

【解决方案3】：

目前还没有这样的属性来设置特定日期的样式

查看此处了解支持的属性列表

https://www.primefaces.org/primeng/#/calendar

PS：添加了禁用特定日期的新功能。

如果需要，您也可以在库中进行更改。

【讨论】：