Question

我正在尝试使用离子本机datepicker插件。我试图用离子输入。点击它应该能够选择日期并在输入字段中显示值。不幸的是，当我使用type =＆＃34; date＆＃34;时，它会从弹出日历中选择并输入值，但同时会打开两个日历。如果我将类型更改为文本或其他任何内容，它会弹出日历并且不允许我选择并输入值到字段。

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

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

另外，除了离子输入还有什么可以用作表格字段吗？

以下是我的代码：

＆＃13;

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

＆＃13;

home.ts

＆＃13;

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)
  );

}

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

如何在离子输入中使用离子2 datepicker插件？还有其他选择吗？

1 个答案: