angular - ng2-bootstrap DatePicker の customClass プロパティを使用するにはどうすればよいですか?

Question

ユーザーが複数の日付を選択できるように、 ng2-bootstrap DatePickerを使用しています。ピッカーで「選択された」日付を強調表示したいと思います。「customClass」プロパティがこれを行う方法であるように思われますが、私はそれを機能させることができませんでした.また、その使用例も見たことがありません. 誰でも簡単な例がありますか？

Answer 1

同じ問題に遭遇し、Github でコードを掘り下げる必要がありました。私の例では、開始日と終了日があり、その間のすべての日をスタイルしたいと考えています。

私は Moment.js を使用しています。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>