如何使用 ng2-bootstrap DatePicker 的 customClass 属性？

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>