Как разрешить навигацию по месяцам в ngbdatepicker, не отключая выбор дат? - PullRequest
Новая
       51

Как разрешить навигацию по месяцам в ngbdatepicker, не отключая выбор дат?

0 голосов
/ 07 декабря 2018

Угловая версия: 6
Библиотека: ngbbootstrap
Ссылки на библиотечные ссылки:
https://ng -bootstrap.github.io/#/components/datepicker/examples
https://ng -bootstrap.github.io / # / components / datepicker / api

Использование вышеуказанной библиотекиЧтобы отобразить конкретные даты, мне нужно включить навигацию по месяцам в DatePicker, но отключить выбор (щелчок) дат.

Ниже приведен мой код для отображения средства выбора даты, где <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>

Некоторая помощь в этом будет отличной!

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете использовать функцию markDisabled, чтобы пометить определенные даты как отключенные.Установите это на ngb-datepicker следующим образом: 

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

Затем определите функцию isDisabled, которая будет возвращать true (это пометит все даты как отключенные): 

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

Элементы управления месяцами будут по-прежнему активны, но даты не будут выбраны.Пожалуйста, посмотрите этот StackBlitz для демонстрации.

...