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.

CodePudding user response：

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