ngx-bootstrap datepicker - disable specific days

Question

I am using v2.0.1 of ngx-bootstrap in my project. I am trying to configure the datepicker to disable certain days. The config option is dayDisabled. This feature was implemented in v2.0.0 of ngx-bootstrap. https://github.com/valor-software/ngx-bootstrap/pull/2744/files The way I am implementing it is not picking it up.

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
        class="form-control"
        placeholder="Datepicker"
        bsDatepicker
        [bsConfig]="{ dayDisabled: '[0,1,2,3]', containerClass: 'theme-red' }">
  </div>
</div>

Answer 1

You can use BsDatepickerConfig:

dayDisabled: [0, 1, 2] into bsConfig

or

dayDisabled: '[0,1,2,3]' = dayDisabled: [0,1,2,3]

https://valor-software.com/ngx-bootstrap/#/datepicker#themes

import { Component } from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'demo-datepicker-color-theming',
  templateUrl: './color-theming.html'
})
export class DemoDatepickerColorThemingComponent {
  colorTheme = 'theme-green';

  bsConfig: Partial<BsDatepickerConfig>;

  applyTheme(pop: any) {
    // create new object on each property change
    // so Angular can catch object reference change
    this.bsConfig = Object.assign({}, { containerClass: this.colorTheme, dayDisabled: [0, 1, 2] });
    setTimeout(() => {
      pop.show();
    });
  }
}