如何在ngbdatepicker中允许月份导航，同时禁用日期选择

Question

角度版本：6
库：ngbbootstrap
库引用链接：https://ng-bootstrap.github.io/#/components/datepicker/examples
https://ng-bootstrap.github.io/#/components/datepicker/api

使用上面的库来显示特定的日期，我需要启用日期选择器的月份导航，但禁用日期的选择(单击(。

以下是我渲染日期选择器的代码，其中<ng-template>用于自定义日期视图：

<ngb-datepicker #datepicker [(ngModel)]="model" (navigate)="date = $event.next" (select)="onDateSelect($event)"
(ngModelChange)="onModelChange($event)" [dayTemplate]="templete" [disabled]="disabled" [firstDayOfWeek]="0"></ngb-datepicker>
<ng-template #templete let-date="date">
<span *ngIf="!showFixedDates" class="custom-day" [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date) || (isContains(date) && showFixedDates)"
[class.focused]="focused && showFixedDates" [class.hidden]="isPrevious(date) || isAfter6Months(date)"
[class.previousRangeExtremes]="isPrevious(date) && ( isFrom(date) || isTo(date))" [class.previousRange]="isPrevious(date) && isInside(date)"
(mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
<span *ngIf="showFixedDates" class="custom-day" [class.focused]="focused" 
[class.range]="isContains(date)" (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>

这方面的一些帮助将是伟大的！

Answer 1

您可以使用markDisabled函数将特定日期标记为禁用。在ngb-datepicker上设置如下：

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

然后定义一个返回true的isDisabled函数(这具有将所有日期标记为禁用的效果(：

isDisabled = (date: NgbDate, current: {month: number}) => true;

月份导航控件仍将处于活动状态，但无法选择日期。请参阅此StackBlitz演示。