Как изменить фон ячейки одного конкретного дня в ngb-datepicker - Angular - PullRequest
0 голосов
/ 06 ноября 2019

Я начинаю работать с ngb-datepicker и хотел бы узнать, можно ли изменить background-color одного конкретного дня, например, 8 ноября.

HTML

<ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled"
    #d="ngbDatepicker"></ngb-datepicker>


<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled"
  let-focused="focused">
  <span class="custom-day" [class.weekend]="isMarkedDay(date)" [class.focused]="focused" [class.bg-primary]="selected"
    [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>

Машинопись

export class HistoryComponent implements OnInit {
  model: NgbDateStruct;
  accomplishedDays: NgbDate[] = [];
  day = new Date().getDate();
  month = new Date().getMonth() + 1;
  year = new Date().getFullYear();
  today: NgbDate = new NgbDate(this.year, this.month, this.day); // July, 14 1789

  constructor(
    public mockdataService: MockDataService,
    private calendar: NgbCalendar
  ) {}

  ngOnInit() {}
  isDisabled = (date: NgbDate, current: { month: number }) =>
    date.month !== current.month;

  isMarkedDay = () => this.calendar.getToday() == this.today; // .getWeekday(date) >= this.today;
}

Я пробовал это некоторое время, но не могу заставить его работать. Сейчас я просто пытаюсь отметить текущий день, но он не работает. Я проверил в консоли, если this.calendar.getToday() и this.today печатает то же самое, и это делает, но при сравнении их ложно.

1 Ответ

1 голос
/ 06 ноября 2019

Да, вы можете сделать это, вы можете предоставить собственный шаблон HTML для каждого дня в DP, где вы можете легко установить класс css в зависимости от дня.

ОБНОВЛЕНИЕ

  • Даты, которые вы сравниваете, являются объектами JS иВы не можете сравнивать их таким образом (вы должны кое-что узнать о Сравнении объектов JS )
  • Чтобы сравнить их, вы можете использовать встроенный метод в NgbDate для сравненияпоэтому ваш код будет выглядеть так:

    isMarkedDay = () => this.calendar.getToday().equals(this.today));

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...