如何使用NG2-引导数据报警器的customClass属性？

Question

我们使用NG2-引导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>

​