mark-disabled ng-bootstrapが他のdatepickersで動作しない例

Question

ng-bootstrap datepicker exampleから範囲選択とグローバル設定を使用しようとしています。 config.mark-disabledは私のコードには当てはまりません： これは、上のリンクの例のほとんどのコードです。 fromDateとtoDateの値を変更して、無効にする必要がある日数と競合があったかどうかを確認しましたが、それは役に立ちませんでした。

私.TSファイル：

import { Booking } from '../booking/booking.model'; 
import { BookingDataService } from '../booking-data.service'; 
import { Component, OnInit } from '@angular/core'; 
import {NgbDateStruct, NgbCalendar,NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap'; 
import { AddBookingComponent } from '../add-booking/add-booking.component'; 
import { EventEmitter } from '@angular/core/src/event_emitter'; 


const equals = (one: NgbDateStruct, two: NgbDateStruct) => 
one && two && two.year === one.year && two.month === one.month && two.day === one.day; 

const before = (one: NgbDateStruct, two: NgbDateStruct) => 
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day 
    ? false : one.day < two.day : one.month < two.month : one.year < two.year; 

const after = (one: NgbDateStruct, two: NgbDateStruct) => 
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day 
    ? false : one.day > two.day : one.month > two.month : one.year > two.year; 

@Component({ 
    selector: 'app-calendar', 
    templateUrl: './calendar.component.html', 
    styleUrls: ['./calendar.component.css'], 
    providers: [NgbDatepickerConfig, BookingDataService] 
}) 
export class CalendarComponent implements OnInit { 

    private bookings : Booking[]; 
    hoveredDate: NgbDateStruct; 

    fromDate: NgbDateStruct; 
    toDate: NgbDateStruct; 
    model; 

    constructor(calendar: NgbCalendar, config : NgbDatepickerConfig, private _bookingDataService: BookingDataService) { 

     this.fromDate = calendar.getToday(); 
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 3); 

     config.minDate = {year: calendar.getToday().year, month: calendar.getToday().month-1,day:calendar.getToday().day} 
     config.maxDate = {year: 2099, month: 12, day: 31}; 

     config.outsideDays = 'hidden'; 

     config.markDisabled = (date: NgbDateStruct) => { 
     const d = new Date(date.year, date.month - 1, date.day); 
     return d.getDay() === 0 || d.getDay() === 6; 
     }; // this function disables the weekends, but in my case it doesn't seem to work 

    } 

    // isDisabled = (date: NgbDateStruct, current: {month: number}) => { 
    //  const d = new Date(date.year, date.month - 1, date.day); 
    //  return this.isBookedDate(); // this is undefined 
    // } 
    // isBookedDate() : Date[]{ 
    //  return null; 
    //  // return this._bookingDataService.bookings.filter(obj => obj.date< caledar.getToday()) 
    // } 

    onDateChange(date: NgbDateStruct) { 
     if (!this.fromDate && !this.toDate) { 
     this.fromDate = date; 
     } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) { 
     this.toDate = date; 
     } else { 
     this.toDate = null; 
     this.fromDate = date; 
     } 
    } 

    isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate); 
    isInside = date => after(date, this.fromDate) && before(date, this.toDate); 
    isFrom = date => equals(date, this.fromDate); 
    isTo = date => equals(date, this.toDate); 

    ngOnInit() { 

    } 

    bookNow(fromDate: Date, toDate : Date) : boolean { 
    return true; 
    } 

    display(vid:AddBookingComponent){ 

    } 

} 

私のhtml：

<ngb-datepicker #dp ngModel [(ngModel)]="model" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t"> 
</ngb-datepicker> 

<ng-template #t let-date="date" let-focused="focused"> 
    <span class="custom-day" 
     [class.focused]="focused" 
     [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)" 
     [class.faded]="isHovered(date) || isInside(date)" 
     (mouseenter)="hoveredDate = date" 
     (mouseleave)="hoveredDate = null"> 
    {{ date.day }} 
    </span> 
</ng-template> 

<hr> 

<div> 
    <pre>From night: {{ fromDate.day}}/{{fromDate.month}}/{{fromDate.year}} </pre> 
    <pre>To night: {{ toDate.day}}/{{toDate.month}}/{{toDate.year}} included</pre> 
</div> 

<button class="btn btn-success" (click)="bookNow('fromDate','toDate')" (click)="display('AddBookingComponent')" >Book now</button> 
<!-- <app-add-booking></app-add-booking> --> 

二つの例の組み合わせは動作しないようです。 何か助けていただければ幸いです。

Answer 1

設定を忘れてしまいました。ちょうどあなたのNGB-日付ピッカーで[markDisabled]使用

<ngb-datepicker #dp ngModel [(ngModel)]="model" (ngModelChange)="onDateChange($event)" 
[dayTemplate]="customDay" [markDisabled]="isDisabled" [displayMonths]="2" 
></ngb-datepicker> 

isDisabled(date: NgbDateStruct) { 
    const d = new Date(date.year, date.month - 1, date.day); 
    return date.day==13 || d.getDay() === 0 || d.getDay() === 6; 
    } 

NOTAのようなあなたのisDisabled機能は：あなたは、日付を使用することができ、無効化、集中して自分のBG-テンプレートで変数を選択し

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" 
    let-disabled="disabled" let-focused="focused" 
    let-selected="selected" > 
    <div class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused" 
    [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" 
    [class.text-muted]="disabled"> 
    {{ date.month }} 
</div> 
</ng-template>