angular - ng-bootstrap 日历应用按月禁用天
问题描述
我可以在页面初始化后重新申请禁用天吗?我有一种情况,我想重新应用禁用天数取决于用户移动日历上的页面(按月)。原因是我的禁用天数数据很大,我想获得只有日历月用户查看的禁用天数。
我的导航事件会提取日期,但意味着日历已经显示并且回调已经调用。我找不到任何方法来设置禁用天后。有任何帮助
.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
};
}
解决方案
可以整天禁用一种解决方法并制作自定义日模板。在自定义日期模板中,您有两个跨度,一个通过单击更改模型,另一个没有单击。
注意:我使用 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
如果你在8月,23被禁用,如果你改到9月,2秒后,13被禁用
推荐阅读
- javascript - ChartsJS Annotations Plugin - 你能创建一个工具提示来伴随注释吗?
- r - 使用 tidyr 实现等效的 rbind
- android - 如何从 FirebaseMessagingService 执行 fullScreenIntent
- ruby-on-rails - rswag - 添加服务器的最佳实践
- android - Android App的用户数据不断增加:房间数据库
- java - springboot中的抽象类继承
- ios14 - 如何在 iOS 14 中使用 PHAuthorizationStatusLimited
- hangouts-chat - 谷歌聊天机器人自动扩展票证参考
- r - 在 R 中,如何将文件名列表读入单个数据帧?
- python - 创建 Python Tkinter 可执行文件。问题是在创建可执行文件后运行程序时,程序找不到依赖项