Change date on change event in 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;
  }

please share the ts file code – Deepu Reghunath May 11 '21 at 07:59 — Deepu Reghunath, May 11 '21 at 07:59
@DeepuReghunath I have added ts file please help. – Karan Gupta May 11 '21 at 10:52 — Karan Gupta, May 11 '21 at 10:52
what is `splitRuleDetail` ? no able to find in the ts file – Deepu Reghunath May 11 '21 at 12:29 — Deepu Reghunath, May 11 '21 at 12:29

score 0 · Answer 1 · answered May 11 '21 at 13:21

step to follow

use (value) instead of [(ngModel)]
remove [ngModelOptions]="{updateOn: 'blur'}"
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

Change date on change event in ngb-datepicler

1 Answers1