Как использовать свойство customClass ng2-bootstrap DatePicker?

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


angular datepicker ng2-bootstrap
person Chuck Spencer    schedule 29.06.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Столкнулся с той же проблемой и пришлось копаться в коде на 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>

person Carole Rivera    schedule 24.10.2016
comment
у вас есть образец для этого? - person Sajeetharan; 10.02.2017
comment
Я не могу опубликовать весь класс DateRangeUtils, так как этот пример очень специфичен для моих требований и на самом деле не имеет отношения к исходному вопросу. Это просто вспомогательный класс, который вызывает moment.js для сравнения дат. Я предлагаю добавить moment.js в ваше решение и использовать их функции в соответствии с вашими требованиями. - person Carole Rivera; 11.02.2017