angular - ngb-datepicler 中更改事件的更改日期

Question

我在这里有来自 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 文件，这与给定的 exmaple 相同。但我认为 ts 文件没有问题。

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date && 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 this.toDate && date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || (this.toDate && 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 && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
  }

标签： angularng-bootstrapngb-datepicker

Answer 1

要遵循的步骤

1. 使用(value)而不是[(ngModel)]
2. 消除[ngModelOptions]="{updateOn: 'blur'}"
3. 在日期选择上手动关闭数据选择器

stackblits 解决方案

     onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date && 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 && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

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

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || (this.toDate && 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 && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
  }

stackblits 解决方案