如何将 ionic 2 datepicker 插件与 ion-input 一起使用？还有其他选择吗？

Question

我正在尝试使用 ionic 原生日期选择器插件。我正在尝试将它与离子输入一起使用。单击后，它应该能够 select 日期并在输入字段中显示值。不幸的是，当我使用类型 ="date" 时，它确实从弹出日历中选择并输入值，但同时它打开了两个日历。如果我将类型更改为文本或其他任何内容，它会弹出日历并且不允许我 select 并在字段中输入值。

随着时间的推移，我不确定应该使用哪种类型？

Something like this In this you can see, when I click on input field, it opens light calendar behind the dark one

此外，除了 ion-input 之外，还有什么可以用作表单域的吗？

下面是我的代码：

<ion-item>
  <ion-label floating>Date</ion-label>
  <ion-input type="date" (input)="date = $event.target.value" [(ngModel)]="date" (click)="showCalendar()"></ion-datepicker>
</ion-item>

<ion-item>
  <ion-label floating>Time</ion-label>
  <ion-input (input)="time = $event.target.value" [(ngModel)]="time" (click)="showTime()" ion-time-picker></ion-datepicker>
</ion-item>

home.ts

showCalendar() {

  this.datePicker.show({
    date: new Date(),
    mode: 'date',
    titleText: 'set Date',
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
  }).then(
    date => console.log('Got date: ', date),
    err => console.log('Error occurred while getting date: ', err)
  );

}
showTime() {

  this.datePicker.show({
    date: new Date(),
    mode: 'time',
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
  }).then(
    date => console.log('Got date: ', date),
    err => console.log('Error occurred while getting date: ', err)
  );

}

Answer 1

所以最终的 html 代码如下所示。可能对其他人有帮助：

<ion-item>
  <ion-label floating>Date</ion-label>
  <ion-input type="date" (input)="date = $event.target.value"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Time</ion-label>
  <ion-input type="time" (input)="time = $event.target.value"></ion-input>
</ion-item>

如何将 ionic 2 datepicker 插件与 ion-input 一起使用？还有其他选择吗？

How do I use ionic 2 datepicker plugin with ion-input? Any other alternative?

datepicker

cordova-plugins

ionic2

ionic-native

angular