Блог

У меня есть всплывающее окно выбора диапазона из ngb-datepicker здесь. Я получил начальную дату с бэкенда, он работает нормально. но когда я обновляю дату, она не изменилась в поле ввода. как исправить эту ошибку?

 <div class="form-group">
    <div class="input-group">
        <input
            #dpFromDate
            class="form-control"
            placeholder="From (YYYY-MM-DD)"
            name="dpFromDate"
            [(ngModel)]="splitRuleDetail.startDate"
            [ngModelOptions]="{updateOn: 'blur'}"
            (input)="fromDate = validateInput(fromDate, dpFromDate.value)"
        />
        <div class="input-group-append">
            <button
                    class="btn btn-outline-secondary calendar"
                    (click)="datepicker.toggle()"
                    type="button"
            ></button>
        </div>
    </div>
</div>
<div class="form-group ml-2">
    <div class="input-group">
        <input
            #dpToDate
            class="form-control"
            placeholder="To (YYYY-MM-DD)"
            name="dpToDate"
            [(ngModel)]="splitRuleDetail.endDate"
            [ngModelOptions]="{updateOn: 'blur'}"
            (input)="toDate = validateInput(toDate, dpToDate.value)"
        />
        <div class="input-group-append">
            <button
                    class="btn btn-outline-secondary calendar"
                    (click)="datepicker.toggle()"
                    type="button"
            ></button>
        </div>
    </div>
</div>
 

Я добавил файл TS, это то же самое, что и в данном примере.но я думаю, что нет никаких проблем с файлом ts.

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

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

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

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

  validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
    const parsed = this.formatter.parse(input);
    return parsed amp;amp; this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
  }
 

шаг, за которым нужно следовать

1. используйте (value) вместо [(ngModel)]
2. удалить [ngModelOptions]="{updateOn: 'blur'}"
3. вручную закройте datapicker при выборе даты

решение stackblits

      onDateSelection(date: NgbDate) {
    if (!this.fromDate amp;amp; !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate amp;amp; !this.toDate amp;amp; date amp;amp; date.after(this.fromDate)) {
      this.toDate = date;
      this.sub.close();  // close manually
    } else {
      this.toDate = null;
      this.fromDate = date;
    }

  }

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

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

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

  validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
    const parsed = this.formatter.parse(input);
    return parsed amp;amp; this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
  }
 

решение stackblits