NG-引导日历按月应用禁用天数

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

可以全天禁用一种解决方法并制作自定义日期模板。在自定义日期模板中，您有两个跨度，一个跨度具有更改模型的单击，另一个跨度没有单击。

注意：我使用设置间隔模拟禁用天数的搜索

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>

你可以看到堆叠闪电战

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