Ngb Datepicker, как выбрать диапазон дат до первой отключенной даты - PullRequest
Новая
       61

Ngb Datepicker, как выбрать диапазон дат до первой отключенной даты

1 голос
/ 07 октября 2019

У меня есть средство выбора даты, по умолчанию некоторые даты отключены. И когда я выбираю диапазон дат, я хочу выбрать только до следующей отключенной даты. сейчас я могу выбрать диапазон, включая отключенные даты.

Я создал плункер здесь , здесь для примера даты 17,18,19 отключены. Если я выбираю диапазон от 10 до 20, нужно выбрать только до 16, или выбор должен быть отключен после отключенного дня. Есть ли способ добиться этого? Я не нашел решения онлайн.

Вот мой шаблон 

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" [markDisabled]="isDisabled" >
</ngb-datepicker>
<ng-template #t let-date let-focused="focused">
    <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
        {{ date.day }}
     </span>
</ng-template>

Вот мой код компонента 

onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
  }

  isDisabled = (date: NgbDateStruct, current: {month: number, year: number})=> {
    return this.disabledDates.find(x => NgbDate.from(x).equals(date))? true: false;
  }

Пожалуйста, помогите.

...