Ionic 选择后自动提交的离子日期输入

rlcwz9us  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(138)

我刚开始使用ionic,我有一个项目,当选择一个日期时,它会自动提交和显示报告。问题是当我选择一个日期时,数据不会被提交。下面是我的.ts代码。

async showRepo(item_date: Date) {
 this.db.repoProduct(item_date).then((_) => 
{
  console.log(_);
  this.product = {};
   });
  }

这是我的.html代码

<ion-item>
  <ion-input
    type="date"
    (ionInput)='showRepo(item_date)'
  ></ion-input>
 </ion-item>

先谢了。

dgiusagp

dgiusagp1#

您可以通过多种方式实现这一点。创建一个变量并将其作为ngModel附加到ion-input,然后使用ngModelChange事件来捕捉输入更改。
如果使用ion-datetime,则可以使用ionChange事件来获取日期更改。
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

相关问题