在 ng Bootstrap datepicker 中禁用特定日期

Question

我正在使用 Angular 8 我正在使用 ngDatePicker 来选择日期

我能够验证最小和最大日期范围 **

但我无法禁用特定日期

例子

June month disable 15th and 17th of June 

July month disable 18th and 10 of july

但我做不到我只能禁用最小日期和最大日期以及验证我正在分享我的代码

我的代码：

datepicker.config.ts

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

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

  model: NgbDateStruct;
  markDisabled;

  constructor(config: NgbDatepickerConfig, calendar: NgbCalendar) {
    // customize default values of datepickers used by this component tree
    config.minDate = {year: 2020, month: 6, day: 1};
    config.maxDate = {year: 2020, month: 7, day: 31};

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

   // call your service
    setTimeout(()=>{
     // this.markDisabled = (date: NgbDate, current: {month: number}) => date.day === 13;     
       this.markDisabled = (date: NgbDate) =>  calendar.getWeekday(date) >= 6; 
     
      //  console.log(calendar.getWeekday(calendar.getToday()))
    },2000)
   
  }
}

datepicker.config.html

<ngb-datepicker [(ngModel)]="model" [markDisabled]="markDisabled"></ngb-datepicker>

link : https://stackblitz.com/edit/angular-ypqcv4-hxdcnj?file=app%2Fdatepicker-config.html

Answer 1

日期的 date.month 和 date.day 字段：NgbDate 对象必须结合使用才能实现。

this.markDisabled = (date: NgbDate, current: { month: number }) =>
((date.day === 15 || date.day === 17) && date.month === 6) || ((date.day === 10 || date.day === 18) && date.month === 7) || calendar.getWeekday(date) >= 6;

在 ng Bootstrap datepicker 中禁用特定日期

Disable Specific Date in ng Bootstrap datepicker

angular

angular6

angular8

ng-bootstrap

angular-daterangepicker

例子