0

我正在使用 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>

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

4

1 回答 1

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;
于 2020-07-03T06:15:49.563 回答