Angular 2 boostrap datepicker禁用其他日期无效

时间:2018-07-03 22:41:18

标签: angular datepicker ng-bootstrap

我目前正在使用示例https://ng-bootstrap.github.io/#/components/datepicker/examples

中的角度引导datepicker(Basic Datepicker)

我的问题是,除了设置的所选日期之外,如何禁用其他日期? 例如:选择了7月13日,其他日期都被禁用。

感谢和期待!

1 个答案:

答案 0 :(得分:0)

我不知道这是否正是您所需要的,但这可能使您走上正轨: 您可以通过修改所引用页面底部的全局配置示例将日期限制为特定日期

import {Component} from '@angular/core';
import {NgbDatepickerConfig, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-config',
  templateUrl: 'src/datepicker-config.html',
  providers: [NgbDatepickerConfig] // add NgbDatepickerConfig to the component 
providers
})
export class NgbdDatepickerConfig {

  model;

  constructor(config: NgbDatepickerConfig) {
    // customize default values of datepickers used by this component tree
    config.minDate = {year: 1900, month: 1, day: 1};
    config.maxDate = {year: 2099, month: 12, day: 31};

    // days that don't belong to current month are not visible
    config.outsideDays = 'hidden';

    // everyday but today is disabled
    config.markDisabled = (date: NgbDateStruct) => {
      const today = new Date();
      today.setHours(0,0,0,0);
      const d = new Date(date.year, date.month - 1, date.day);
      return d.getTime() !== today.getTime();
    };
  }
}

希望这会有所帮助