ngx-bootstrap datepicker - 禁用特定日期

Question

我在我的项目中使用了ngx-bootstrap的v2.0.1。 我正在尝试配置 datepicker 以禁用某些天。 config选项是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();
    });
  }
}