Wie verwende ich die CustomClass-Eigenschaft von ng2-bootstrap DatePicker?

Question

Wir verwenden die ng2-bootstrap DatePicker, damit Benutzer mehrere Daten auswählen können. Wir möchten die "ausgewählten" Daten im Picker hervorheben. Scheint so, als ob die "customClass" -Eigenschaft die Möglichkeit wäre, dies zu tun, aber ich war nicht in der Lage, es zum Laufen zu bringen - noch habe ich irgendwelche Beispiele seiner Verwendung gesehen. Hat jemand da draußen ein einfaches Beispiel?

Answer 1

Ran in das gleiche Problem und musste durch den Code auf Github graben. In meinem Beispiel habe ich ein Anfangsdatum und ein Enddatum, und ich möchte alle Tage dazwischen stylen.

Ich verwende Moment.js, die viel von der Logik verarbeitet, um das Array von Tagen zu generieren. DateRangeUtils ist eine benutzerdefinierte Helper-Klasse.

Wichtig ist zu wissen, dass der Modus der Modus des Datumsspeichers ist (Tag, Monat oder Jahr). In meinem Beispiel verwenden wir nur den Tagesmodus.

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>