Как мне использовать свойство customClass nP2-bootstrap DatePicker?

Question

Мы используем ng2-bootstrap DatePicker, чтобы позволить пользователям выбирать несколько дат. Мы хотели бы выделить "выбранные" даты в окне выбора. Похоже, что свойство customClass должно быть способом сделать это, но я не смог заставить его работать - и я не видел никаких примеров его использования. У кого-нибудь есть простой пример?

Answer 1

Наткнулся на ту же проблему и пришлось копаться в коде на Github. В моем примере у меня есть дата начала и дата окончания, и я хочу стилизовать все промежуточные дни.

Я использую Moment.js, который обрабатывает много логики для генерации массива дней. DateRangeUtils - это пользовательский вспомогательный класс.

Важно знать, что режим - это режим выбора даты (день, месяц или год). В моем примере мы используем только дневной режим.

export class CustomDayStyle {
    public date: Date;
    public mode: string;
    public clazz: string;

    constructor(date: Date, mode: string, clazz: string) {
        this.date = date;
        this.mode = mode;
        this.clazz = clazz;
    }
}

private get selectedDays(): Array<CustomDayStyle> {
  var days = new Array<CustomDayStyle>();

  var dateIndex = DateRangeUtils.toMoment(this.beginDate);
  while (!DateRangeUtils.isAfter(dateIndex, this.endDate)) {
    days.push(new CustomDayStyle(dateIndex.clone().toDate(), "day", "class-name-here"));
    dateIndex.add(1, 'days');
  }

  return days;
}

.class-name-here {
   // Your css here
 }

<datepicker [(ngModel)]="beginDate" [customClass]="selectedDays" >
</datepicker>