ngx-bootstrap datepicker - 禁用特定日期

Question

我在我的项目中使用 v2.0.1 的 ngx-bootstrap。 我正在尝试配置 datepicker 以禁用某些日子。 配置选项是 dayDisabled。 此功能在 ngx-bootstrap 的 v2.0.0 中实现。 https://github.com/valor-software/ngx-bootstrap/pull/2744/files 我实施它的方式并没有把它捡起来。

<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

你可以使用BsDatepickerConfig:

dayDisabled: [0, 1, 2] 转为bsConfig

或

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();
    });
  }
}