Как задать собственный цвет для каждой даты в angular bsDatepicker - PullRequest
Новая
       42

Как задать собственный цвет для каждой даты в angular bsDatepicker

0 голосов
/ 09 июля 2020

Я использую bootstrap bsDatepicker в моем angular приложении для отображения календаря. Мне нужно для некоторых дат в календаре дать другой цвет. Например, введите описание изображения здесь

Здесь мне нужно указать синий цвет фона для 28 и 29, красный для 30 и 31. Я уже ищу в Интернете, но не нашел способа сделать это. Заранее спасибо.

1 Ответ

0 голосов
/ 10 июля 2020

У меня есть решение, я создал массив dateCustomClasses условно. 

let dateCustomClasses = this.getDates(minDate, maxDate);

getDates = (startDate, endDate) => {
    var dates = [],
      currentDate = startDate,
      addDays = function (days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      };
    while (currentDate <= endDate) {
      let className = "blue";
      if (myCondition) {
        className = "red";
      }
      dates.push({ date: currentDate, classes: [className] });
      currentDate = addDays.call(currentDate, 1);
    }
    return dates;
  };

<input type="text" name="new_buyback_date" class="form-control" placeholder="Date"
      [(ngModel)]="date" [bsConfig]="bsConfig" [minDate]="minDate"
      [maxDate]="maxDate" (bsValueChange)="onDateChange($event)"
      [dateCustomClasses]="dateCustomClasses" bsDatepicker required>
...