Datepicker with debounced input change event

Question

I want to send a request to my server to filter a list based on a date selected by the user, but I want to use the debounce for this in order not to spam the backend.

My TS Component

@ViewChild('searchInputDateStart', {static: false}) searchInputDateStart: ElementRef;

ngAfterViewInit() {
  fromEvent(this.searchInputDateStart.nativeElement, 'dateInput').pipe(
    map((event: any) => {
      return event.target.value;
  }),
  debounceTime(500)
  ).subscribe((filterValue: string) => {
    this.startDateToFilterFor = filterValue;
    this.sendRequest();
  });
}

My Template

<mat-form-field appearance="fill"
                          fxFlex.lt-md="20"
                          fxFlex.gt-sm="40"
                          color="accent">
            <input id="inputDateStart"
                   matInput
                   #searchInputDateStart
                   [matDatepicker]="pickerStart">
            <mat-datepicker-toggle matSuffix
                                   [for]="pickerStart"></mat-datepicker-toggle>
            <mat-datepicker #pickerStart></mat-datepicker>

</mat-form-field>

The same approach worked for the 'keyup' event on a normal text field, exactly like this answer but not for a datepicker

The problem is how you try to get the date change. It won't emit native events on the input. — Andrei Tătar, Sep 19 '19 at 15:12

Andrei Tătar · Accepted Answer · 2019-09-19T15:03:28.497

Here's a simple way of doing it:

https://stackblitz.com/edit/angular-s49hsb-gqlydz?file=app/datepicker-overview-example.html

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  private date$ = new BehaviorSubject<Date | null>(null);
  private destroy$ = new Subject();

  get date() {
    return this.date$.value;
  }
  set date(value) {
    this.date$.next(value);
  }

  ngOnInit() {
    this.date$.pipe(
      debounceTime(500),
      // you could use a switchMap to cancel any pending requests
      switchMap(date => this.getData(date)), 
      takeUntil(this.destroy$), // stop any pending actions if component is destroyed
    ).subscribe(result => {
      console.log(result);
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  getData(date: Date) {
    return of('Some http call maybe for ' + date);
  }
}

and in your template:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

You can also use the dateChange event on the matDatepicker instead of the two way binding on date:

<input matInput [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="date$.next($event.value)">

so now you can delete the date property in the component class.

score 0 · Answer 2 · answered Mar 05 '21 at 18:25

0

Does it even make sense to debounce on input of a Date value? A Date is an all or nothing thing ... one cannot input half a Date

answered Mar 05 '21 at 18:25

Cristian

151
1
5

Datepicker with debounced input change event

2 Answers2