mark-disabled ng-bootstrap not working with other datepickers examples

问题

I am trying to use the range selection and the global configuration from the ng-bootstrap datepicker example. But the config.mark-disabled doesn't seem to apply in my code: It's almost only code from the examples from the link above. I changed the fromDate and toDate value to see if there was a conflict with the days that should be disabled, but it didn't help.

my .ts file :

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){

  }

}

my 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> -->

The combination of the two examples seems not to work. Any help is much appreciated.

回答1:

Forget config (and my before comment). Just use [markDisabled] in your ngb-datepicker

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

your isDisabled function like

  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: you can use date,disabled,focused and selected variables in your bg-template

<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>

来源：https://stackoverflow.com/questions/47738545/mark-disabled-ng-bootstrap-not-working-with-other-datepickers-examples