Question

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

我想做

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

Answer 1

目前还没有针对特定日期样式设置的此类属性

请点击此处查看支持的属性列表

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

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

如果需要，您也可以更改库。

Answer 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>

Answer 3

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

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

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

在具有p日历的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()});
  }

确保您正在准备的日期数组（在我的情况下为invalidDates）不应该有时间。使用如上所述的setHours方法。

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

3 个答案: