Угловой Ng-Bootstrap Datepicker Календарь День Цвет фона - PullRequest
Новая
       29

Угловой Ng-Bootstrap Datepicker Календарь День Цвет фона

0 голосов
/ 03 июня 2018

как я могу изменить цвет фона на 1+ дней в календаре ng-bootstrap datepicker, так же, как цвет меняется при выборе дня.

Когда выбран день, он изменяет класс div на: 

btn-light bg-primary text-white

Допустим, я хочу, чтобы несколько дней отображались как 

btn-light bg-success text-white

или 

btn-light bg-warning text-white

Как лучше / проще всего этого добиться?

Спасибо

1 Ответ

0 голосов
/ 03 июня 2018

используя пользовательский день, см. Пример в https://ng -bootstrap.github.io / # / components / datepicker / examples # customday

, если ваш customDay похож (просто) 

<ng-template #customDay let-date="date" 
           let-currentMonth="currentMonth" 
           let-selected="selected" let-disabled="disabled" let-focused="focused">
    {{ date.day }}
</ng-template>

Вы можете использовать дату, текущий месяц, выбранный, фокусированный или отключенный для изменения класса, например 

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <span [ngClass]="myClass(date)"  [class.focused]="focused"
        [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>
especialDates:NgbDateStruct[]=[
    {year:2018,month:2,day:1},
    {year:2018,month:2,day:10}]
myClass(date:NgbDateStruct)
{
    let isSelected=this.specialDates
         .find(d=>d.year==date.year && d.month==date.month && d.day==date.day)
    return isSelected?'classSelected':'classNormal'
}

см. https://stackblitz.com/edit/angular-ng-bootstrap-demo-vrxfeu

...