Right way to return true/false in boolean TypeScript/JavaScript method?

Question

I'm trying to disable all the dates where user already has a booked event on. I'm using https://www.npmjs.com/package/ng-pick-datetime TypeScript and Angular 6. I'm more comfortable with Java but learning some Javascript on my own.

.TS

    getUserEvents() {
    this._calendarService.getAllEvent().subscribe(res => {
      this.allEvents = res.json();
    });
  }

  filterForbiddenDays() {
    this.allEvents.forEach(d => {
      let day = {
        'start': new Date(d.startDate.value),
        'end': new Date(d.endDate.value)
      };
      this.forbiddenDays.push(day);
    });
  }

  public myFilter = (d: Date): boolean => {
    //return this.forbiddenDays[0].start.getDate() !== d.getDate() && this.forbiddenDays[1].start.getDate() !== d.getDate() // <-- THIS WORKS GREAT
    this.forbiddenDays.filter(data => {
      return data.start.getDate() !== d.getDate() // <-- TRUE SHOULD CHANGE COLOR ON DAY IN CALENDAR
    });
    return false;
  }

If I map the forbiddenDays array instead of forEach I can see that i'm getting true for every event in the forbiddenDays, which should change the color on theese days, in the calendar.

But right now myFilter method results in this: pic of calendar

What am i doing wrong? I feel like the problem is in myFilter method.

.HTML

    <div class="example-wrapper datePicker">
        <label class="example-input-wrapper" id="eventInputSuccess">
            <input (click)="filterForbiddenDays()" id="eventInputError" placeholder="Click to choose date"
                (dateTimeInput)="basic.openModal()" [(ngModel)]="dateTimeInput" [owlDateTimeTrigger]="dt"
                [owlDateTimeFilter]="myFilter" [owlDateTime]="dt"><i class="fa fa-calendar" aria-hidden="true"></i>
            <owl-date-time #dt [pickerMode]="'dialog'"></owl-date-time>
        </label>
    </div>
</div>

Thanks in advance!

EDIT:

return this.forbiddenDays[0].start.getDate() !== d.getDate();

results in : expected result but for all days in my array

So basically it works great when I specify the index like [0] or [3] etc, but im not sure why it's not working with forEach() or filter()

Answer 1

Your function myFilter allways returns false .

The return inside this.forbiddenDays.forEach() only breaks out of the current iteration but doesn't cause your function to stop. You have to use some or every instead:

public myFilter = (d: Date): boolean => {
    return this.forbiddenDays.every(data => {
        return data.start.getDate() !== d.getDate() // <-- TRUE SHOULD CHANGE COLOR ON DAY IN CALENDAR
    });
}

this will return true only if all elements in the array fulfill data.start.getDate() !== d.getDate() and false otherwise.

Answer 2

Your myFilter function always returns false. The return in the forEach or filter callback is not going to return the myFilter function. It just returns the callback you pass into it, which in this case is pretty pointless.

What I think you want is something like this:

public myFilter = (d: Date): boolean => {
  return this.forbiddenDays.every(forbiddenDay => {
    return forbiddenDay.start.getDate() !== d.getDate();
  });
}

The array.every() method returns false if the callback returns false for any of the array elements.

You could also write this using a for..of loop:

public myFilter = (d: Date): boolean => {
  for (let forbiddenDay of this.forbiddenDays) {
    if (forbiddenDay.start.getDate() !== d.getDate()) {
      return true;
    }
  }
  return false;
}