ion date input with automatic submit upon selection - html

Question

I'm new to ionic and I have this project that auto submits & shows reports when a date is selected. The problem is when I select a date the data isn't being submitted. Here is my .ts code.
async showRepo(item_date: Date) {
this.db.repoProduct(item_date).then((_) =>
{
console.log(_);
this.product = {};
});
}
And here is my .html code
<ion-item>
<ion-input
type="date"
(ionInput)='showRepo(item_date)'
></ion-input>
</ion-item>
Thanks in advance.

Answer 1

You can achieve this lot of ways. Create one variable and attach it with ion-input as a ngModel and use the ngModelChange event to catch the input change.
If you use the ion-datetime you can use the ionChange event to get the date change.
app.component.html
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Hello</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Pick date</ion-label>
<ion-input
value="{{ date | date: 'dd.MM.yyyy' }}"
id="date"
class="ion-text-end"
></ion-input>
<ion-popover
size="cover"
trigger="date"
show-backdrop="false"
[dismissOnSelect]="true"
>
<ng-template>
<ion-datetime
#popoverDatetime
presentation="date"
[(ngModel)]="date"
locale="en-US"
(ngModelChange)="pickDateModelChange($event)"
(ionChange)="ionChangeEvent(popoverDatetime.value)"
></ion-datetime>
</ng-template>
</ion-popover>
</ion-item>
</ion-content>
</ion-app>
app.component.ts
import { Component, OnInit } from '#angular/core';
import { AlertController } from '#ionic/angular';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
private dateValue: any;
get date(): any {
return this.dateValue;
}
set date(value: any) {
console.log({ value });
this.dateValue = value;
}
constructor() {}
ngOnInit() {}
pickDateModelChange(dateValue): void {
console.log('ngModel change triggered');
console.log(dateValue);
//here you need to add your date format function and service call
}
ionChangeEvent(date: Date): void {
console.log('ion change event triggered');
console.log(date);
//here you need to add your date format function and service call
}
}
working example is here