时间戳

首页 > 解决方案 > Angular 2 boostrap 日期选择器禁用其他日期不起作用

angular - Angular 2 boostrap 日期选择器禁用其他日期不起作用

问题描述

我目前正在使用示例https://ng-bootstrap.github.io/#/components/datepicker/examples中的角度引导日期选择器（基本日期选择器）

我的问题是我如何禁用除了我设置的选定日期之外的其他日期？示例：选择了 7 月 13 日，其他日期全部禁用。

感谢并期待！

标签： angulardatepickerng-bootstrap

解决方案

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

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

希望这可以帮助

推荐阅读