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

Question

我们正在使用 ng2-bootstrap DatePicker 让用户选择多个日期。我们想在选择器中突出显示 "selected" 日期。似乎 "customClass" 属性应该是执行此操作的方法，但我无法让它工作 - 我也没有看到任何使用示例。有人有一个简单的例子吗？

Answer 1

运行陷入同样的问题，不得不深入研究 Github 上的代码。在我的示例中，我有一个开始日期和一个结束日期，并且我想设置其间所有日期的样式。

我正在使用 Moment.js，它处理大量逻辑来生成天数数组。 Date运行geUtils 是自定义助手 class.

重要的是要知道模式是日期选择器的模式（日、月或年）。在我的示例中，我们只使用白天模式。

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>

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

How do I use ng2-bootstrap DatePicker's customClass property?

datepicker

ng2-bootstrap

angular