Question

我可以在页面初始化后几天重新申请禁用。我有一种情况，我想重新申请禁用天数取决于用户在日历上移动页面（按月）。原因是我的禁用日数据非常庞大，我只希望查看日历月的用户获得禁用日。

我的导航事件拉日期，但意味着日历已经显示并且回调已经调用。我找不到任何方法来设置禁用天后。希望得到任何帮助

.html
<input class="form-control" .. .. ngbDatepicker #d="ngbDatepicker" (navigate)="pickUpDate($event.next)">


my component

..

constructor(private datePickerConfig: NgbDatepickerConfig){
}

pickUpDate(monthYear){
let yearmonth = `${year}-${month}`;
this.myService.getActiveDates(yearMonth).subscribe( dates => {
  this.disableDates(dates);
})
}

disableDates(dates){
 this.datePickerConfig.markDisabled = (dateStruct:NgbDateStruct) =>{
  return dates.filter(date => {
   let dateArr: string[] = date.split("-);
   let y: number = parseInt(dateArr[0]);
   let m:number = parseInt(dateArr[1]);
   let d:number = parseInt(dateArr[2]);
   return dateStrcut.year == y && dateStruct.month == m && dateStrcut.day == d;  
   }).length == 0
};
}

Answer 1

可以全天禁用一个变通办法，并创建一个自定义日模板。在自定义日期模板中，您有两个跨度，一个跨度单击可更改模型，另一个跨度无单击。

注意：我使用setInterval模拟了disableDays的搜索

export class NgbdDatepickerCustomday {
  model: NgbDateStruct;
  disableDays:NgbDateStruct[]=[];
  yet:boolean=true;
  constructor(private calendar: NgbCalendar) {
    let today:any=new Date();
    this.disableDays=this.getDisabled(today.getMonth()+1);
  }

  //ALL the days are "disabled"
  isDisabled = (date: NgbDate, current: {month: number}) => true;
  isWeekend = (date: NgbDate) =>  this.calendar.getWeekday(date) >= 6;

  //the customDisable: a day is disabled if is one day of the array "this.disableDays"
  isCustomDisable(date: NgbDate)
  {
    let day=this.disableDays.find(x=>x.year==date.year && x.month==date.month && x.day==date.day);
    return day!=undefined;

  }
  //When we navigate, we look for new disables days. I use a setnterval to
  //simulate a real getValues
  navigate(e:any)
  {
    setTimeout(()=>{
      this.disableDays=this.getDisabled(e.next.month)
    },2000)
  }

  //a fool function to change the disables days
  getDisabled(month:number):NgbDateStruct[]
  {
      let disables:NgbDateStruct[]=[];
      switch(month)
      {
        case 8:
           disables=[{year:2018,month:8,day:23}];
           break;
        case 9:
           disables=[{year:2018,month:9,day:13}];
           break;

      }
      return disables;
  }
}

.html类似于：

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd" [markDisabled]="isDisabled"
             name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" #d="ngbDatepicker" (navigate)="navigate($event)">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" 
      let-selected="selected" let-disabled="disabled" let-focused="focused">
  <!--if is "customDisabled"-->
  <span *ngIf="isCustomDisable(date)" class="custom-day"
        [class.bg-primary]="selected"  [class.text-muted]="true">
    {{ date.day }}
  </span>
<!--if not, see that in (click) we must equal model to date 
            and close manually the calendar-->
  <span (click)="model=date;d.close()" *ngIf="!isCustomDisable(date)" class="custom-day"
        [class.bg-primary]="selected"  >
    {{ date.day }}
  </span>
</ng-template>

您可以看到一个stackblitz

如果您在八月，则禁用23，如果更改为9月，则在2秒钟后，禁用13。

ng-bootstrap日历逐月应用禁用

1 个答案: