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

Question

We're using the ng2-bootstrap DatePicker to let users pick multiple dates. We'd like to highlight the "selected" dates in the picker. Seems like the "customClass" property should be the way to do this, but I haven't been able to get it to work - nor have I seen any examples of its use. Anybody out there have a simple example?

Answer 1

Ran into the same problem and had to dig through the code on Github. In my example, I have a begin date and an end date, and I want to style all the days in between.

I'm using Moment.js, which handles a lot of the logic to generate the array of days. DateRangeUtils is a custom helper class.

The important thing to know is that the mode is the mode of the datepicker (day, month, or year). In my example we only use the day mode.

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>