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

Question

I have this range selection popup from ngb-datepicker here . I got the initial date from the backend it's working fine. but when I m updating the date it didn't change in the input field. how to fix this error?

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

I have added TS file this is same as given exmaple.but I think there is no problem is ts file.

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

Answer 1

step to follow

1. use (value) instead of [(ngModel)]
2. remove [ngModelOptions]="{updateOn: 'blur'}"
3. manually close datapicker on date selection

stackblits solution

     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 solution