Attempting to choose a date using a ngbDatepicker and then sending the year, month, and date values via httpClient to the backend in order to filter a Page of Entities named "Show" based on that date. The backend requires the Integers "year", "month", and "day" as parameters.
The issue I'm currently facing is:
When no date is selected, all Elements are correctly retrieved. However, if a date is selected in the datepicker, an empty list is returned. If I manually input the year, month, and day values in the httpClient params, regardless of the selected date, the list is correctly filtered. This indicates there may be an issue with how the Date from the datepicker is being processed.
Here is my datepicker implementation in the .html file:
<!-- other code -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" ref-selectedDate ngbDatepicker #d="ngbDatepicker" id="picker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
<!-- other code -->
<button (click)="search(selectedDate.value)" type="button" class="btn btn-success"><i class="fas fa-search"></i> Search </button>
<!-- other code -->
The search function in the .ts file:
// other code
private search(selectedDate: Date) {
this.shows = [];
this.eventService.getShowPage(this.event.id, selectedDate, this.page, this.pageSize).subscribe(
(page: Page<Show>) => {
this.processShowResponse(page.content);
this.shows = page.content;
this.totalItems = page.totalElements;
},
error => {
this.defaultServiceErrorHandling(error);
}
);
}
// other code
And my service class:
// other code
getShowPage(eventId: number, searchDate: Date, page: number = 1, size: number = 25): Observable<Page<Show>> {
this.log('Load shows of event with id ' + eventId + ' on page ' + page);
let params = new HttpParams().set('page', (page - 1).toString()).set('size', size.toString());
const url = this.eventBaseUri + '/' + eventId + this.showsUri;
if (searchDate) {
params = params.set('year', searchDate.getFullYear().toString());
params = params.set('month', searchDate.getMonth().toString());
params = params.set('day', searchDate.getDate().toString());
}
return this.httpClient.get<Page<Show>>(url, {params: params})
.pipe(map(resp => {
resp.number++;
return resp;
}));
}
// other code