Question

我正在尝试通过处理输入上的click事件在Ionic 2中使用本机日期选择器：

<ion-item>
    <ion-label stacked>Start</ion-label>
    <ion-input type="datetime" readonly="true" placeholder="Choose a date" formControlName="date" (click)="onDateClick($event)" tappable></ion-input>
  </ion-item>

但是readonly属性似乎并没有阻止键盘首次显示，我必须再次单击才能显示本机日期选择器（在onDateClick($event)中处理）。 / p>

我尝试使用disabled属性，该属性有效，但样式不同，并且在使用Reactive Forms时看起来它不是一个好的模式......

知道如何阻止键盘的第一次显示吗？

*****编辑*****

这是onDateClick函数

onDateClick(e: Event) {
    console.log('NewEventPage#onDateClick');

    if (this.platform.is('cordova')) {
      this.datePicker.show({
        date: new Date(),
        mode: 'datetime',
        allowOldDates: false
      }).then(
        date => {
          console.log('Picked date ', date);
          this.startDate = moment(date);
          this.newEventForm.get('date').setValue(moment(date).format('LLLL'));
        },
        err => console.log('Error occurred while getting date: ', err)
      );
    } else {
      let tmp = new Date();
      this.startDate = moment(tmp);
      this.newEventForm.get('date').setValue(moment(tmp).format('LLLL'));
    }
  }

Answer 1

这样做：

<ion-item>
    <ion-label stacked>Start</ion-label>
    <ion-input type="datetime" [readonly]="true" placeholder="Choose a date" formControlName="date" (click)="onDateClick($event)" tappable></ion-input>
  </ion-item>

readonly是离子输入的输入属性，这就是必须在括号内写入的原因。您可以找到更多信息here。

输入上的readonly属性不会阻止键盘显示

1 个答案: